ES6でexportとexport defaultをどう使い分ければいいの?
いきなり結論
基本的にはexport defaultを使うのが良さそうです。
※ named export を使う方がいいかもという考えに変わりました。詳しくは最下部の追記をご参照ください
↓に
http://www.2ality.com/2014/09/es6-modules-final.html#default_exports_are_favored
Default exports are favored
と書いてますね。
理由
importする側で楽できるから。
// めんどい import * as utils from './utils'; import { method1, method2 } from './utils'; // こっちのほうがいい import utils from './utils';
exports.method1 = function() {}はどうするの?
迷ったのが、Node.jsでexports.method1 = function() {}
みたいに書いていたパターンでした。
素直に書くなら
export function method1() { } export function method2() { }
なんですが、これだと利用する側は
import * as utils from './utils'; import { method1, method2 } from './utils';
になって、ちょっとめんどい。
現段階では、↓のどっちかの書き方が正解かなと考えてます。
→ 上記のように 素直に export function
する、どうしてもクラスでまとめたければstatic関数、になりました
// 追記、これはアンチパターン // export default { // method1() {}, // method2() {}, // } // それか、これ。 export default class Utils { static method1() {} static method2() {} } // でもこれやり始めると全部クラス定義しないと気が済まなくなるかも・・・
まだES6勉強中なので、ご意見あればいただければ幸いです。
※ 追記1
- ES6 Module Gotchas - Geedew - Blogging about the web.
- ES Modules: Using Named Exports as the Default Export | by Tim Oxley | Medium
によると、export default
でオブジェクトをエクスポートするのはアンチパターンとのこと。
理由は静的解析による恩恵を受けられなくなるからだそう(Tree-Shaking等)
※ 追記2
↓ Tree-Shaking観点でよく検証されている記事
※ 追記3
TypeScriptの場合は default export は避けた方がよい (リファクタリングした場合もちゃんと検知できる等名前付きexportの方がメリットが大きい)
export default を避けましょうと言っている記事 ↓ .
Avoid Export Default - TypeScript Deep Dive
JavaScriptでも同様にexport defaultは使わない方がよいとする記事 ↓
※ 追記4
良い議論があるので貼っておく