結論
- 基本的には
export default
を使う - 複数のモジュールを
export
するときはexport
を使う - 受け取り側は
import
を使う
Default exports
1つのモジュールをexport
する時。
こちらが推奨されている。
//------ myFunc.js ------
export default function () { ... };
//------ main1.js ------
import myFunc from 'myFunc';
myFunc();
classの場合は下記。
//------ MyClass.js ------
export default class { ... };
//------ main2.js ------
import MyClass from 'MyClass';
let inst = new MyClass();
export default
はexport
にdefault
という特殊な名前が付いたケースと同じこと。
import { default as foo } from 'lib';
import foo from 'lib';
Default exportsが推薦されている理由
David Hermanの言葉を引用。
ECMAScript 6 favors the single/default export style, and gives the sweetest syntax to importing the default. Importing named exports can and even should be slightly less concise.
より簡潔な方がいいよねということ。
Named exports
複数のモジュールをexport
する時。
個別に名前を付けてexport
する。
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
こういう風にまとめても使える。
//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5