ES6のimport/exportを理解する[javascript]

React Nativeをやってると暗黙の了解として、import/exportが使われてる。 requireで書いてたみたいだけど、その歴史を知らないのでrequireは気にしないでimport/exportを理解する。

下記のようにlib.jsとmain.jsがあった場合、importするファイルのlib.js内でfunctionをexportしておくと import {} fromでそれを個々に呼ぶことができる。

//------ 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));
}
const foo = Math.PI + Math.SQRT2;
export { foo };

//------ main.js ------
import { square, diag, foo } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

またアスタリスクを使用することで、オブジェクトを参照してexportした関数が呼べる。

//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

default

よくわからないのがexport default。 セミコロンなしで呼ぶことで関数・クラスをそのまま呼べる。 読む込むファイルごとに 1 つだけ呼ぶことができる。

//------ myFunc.js ------
export default function () { ··· } // no semicolon!

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();
//------ MyClass.js ------
export default class { ··· } // no semicolon!

//------ main2.js ------
import MyClass from 'MyClass';
const inst = new MyClass();

defaultは一つだけというのがポイントですね。

Related Posts