cheezBlog

export・import と exports・require のまとめ

ちーずブログではimport / exportとexports / requireが混在しており、lintで怒られてた。 import / exportとexports / requireを書いてはいたものの、 何が違うのか、どのように使うのかが適切なのか理解してなかったので軽くまとめてみた。

export / import

ES6の構文。

export

export default

ファイルごとにデフォルトのエクスポートを1つだけ持つことができる。 エクスポートしたいclassやオブジェクトなどに対して、exprot defaultをつける。

exprot default {
  ・・・
}

named export

複数exprotすることができる。

export const hogeFunc = () => {
  ・・・
}

// 複数export
const hoge = { hoge: 'hoge' };
const fuga = { fuga: 'fuga' };
export { hoge, fuga };

// export時に名前変更
export { hoge as namedHoge, fuga as namedFuga };

import

exprotされたモジュールをインポートする。

// export defaultの呼び出し
import defaultExport from 'src/module.js';

//モジュールすべてをインポートする
//as モジュール名で名前空間として使える
import * as myModule from 'src/module.js';
//呼び出し
myModule.func();

// 指定import
import { hoge } fromt 'src/module.js'

// 複数import
import { hoge, fuga } fromt 'src/module.js'

// 名前変更
import { hoge as namedHoge, fuga as namedFuga } fromt 'src/module.js'

ベストプラクティス

色々調べたけどよくわからんかった。誰か教えて欲しい...

  • 単一モジュールをexportする場合、export defaultを使う
  • 複数モジュールをexportする場合、named exportを使う
  • オブジェクトをexport defaultするのはアンチパターン...？
    • 単一値であるものが推奨されるらしい

module.exports / require

Node.jsのCommonJSの構文。

module.exports

module.exportsもしくはexportsに代入してエクスポートする。

function hoge() {
  ・・・
}

module.exports = hoge;

require

module.exportsされたものをインポートする

var hoge = require('./src/module.js');

参考