なっく日報

技術やら生活やらのメモ

ES6でexportとexport defaultをどう使い分ければいいの?

いきなり結論

基本的にはexport defaultを使うのが良さそうです。

↓に

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 default でオブジェクトをエクスポートするのはアンチパターンとのこと。 理由は静的解析による恩恵を受けられなくなるからだそう(tree-shaking等)

// 追記、これはアンチパターン
export default {
  method1() {},
  method2() {},
}

// それか、これ。
export default class Utils {
  static method1() {}
  static method2() {}
}

// でもこれやり始めると全部クラス定義しないと気が済まなくなるかも・・・

まだES6勉強中なので、ご意見あればいただければ幸いです。