ESModules

モダンブラウザなら標準で使えるのも良い。

code:index.html

<script type="module" src="index.mjs"></script>

code:index.mjs

import A from './a.mjs';

a();

code:a.js

export default ()=>{

console.log('hello');

};

で、コンソールにhelloと出てくる。

import / export は複数いっぺんに出来たりもする

code:index.mjs

import * as A from './a.mjs';

A.a();

code:a.mjs

function a(){console.log('a');}

function b(){console.log('b');}

export {a, b};

細かい話

名前付きexport

1つのファイルで複数の値をexportする時に使う

export側でオブジェクトの名前をつける。

import側は読み込むオブジェクトの名前を指定する

code:js

// export

const a, b, c;

export {a, b, c};

// import

import {a,c} from 'export.js'

import {b as B} from 'export.js' // import側でリネーム

import * as Lib from 'export.js' // Lib.a, Lib.b として読みだせる

デフォルトexport

1つのファイルで1つの値をexportする

名前をimport側で付けられる

code:js

// export

export default const a;

// import

import A from 'export.js'

import {default as A} from 'export.js'

複数のモジュールを1つにまとめる

モジュール利用者 → 取りまとめjs → モジュール実態　みたいな階層構造になる

code:js

// moduleA

export default function(){ console.log('A'); };

// moduleB

export default function(){ console.log('B'); };

// concat

export { default as callA } from 'moduleA.js'

export { default as callB } from 'moduleB.js'

// user

import * as Lib from 'concat.js'

Lib.callA();

Lib.callB();

名前付きexportにして、concat層を単純化した方が良いかも

code:js

// moduleA

class A {}

export { A }

// moduleB

class B_Impl {}

export const B = new B_Impl(); // singleton

// concat

export * from 'moduleA.js'

export * from 'moduleB.js'

シングルトンを作る

これで正しいのかは不明

code:js

// export

class SigletonImpl {}

export const Singleton = new SingletonImpl()

// import

import {Singleton} from 'export.js'