JavaScriptのmodules

ES2015にはモジュール（ES Modules, ESM）が実装される

これによって、モジュールでエクスポートした関数を他からインポートすることができるようになる

ブラウザの実装状況

modulesをロードする

import文でロードする（ESM）

import うんちゃか from ほげみたいなのがあるとき

これはほげのmodulesを利用しているということ

importがブラウザ未実装だった時代には、既存の機能で再現できるようにBabelやWebPackのようなトランスコンパイラ（モジュールローダ）が必要だった

2019-06-17現在、主要ブラウザはサポートしている

Node.jsではrequire()でロードする（CJS）

安定派はまだCommonJS Modulesを

require()を書いていれば、あとでNode.jsにESMが来たときでも互換性が確保される予定

歴史

~2010

JavaScriptは名前空間がwindowの一つしかない

決めた名前空間を一つだけ使うのが暗黙の了解になっていた

prototypeにヘルバを生やす

ESMとCJSがどう違うのか、成立の過程

CJS は ESM 以前の JS の範囲で実装されていた

CJSはrequire関数を使ってロードするため、実行時に依存解決しなければいけなかった

ESMはimport構文を使い、実行前に依存解決できるようになった

CJSなりESMをどう扱うかは実行環境により異なるので、HTMLの仕様になっている

ブラウザは、CJSかESMか判定するためにscriptタグのtype属性を使う

Node.jsはどのようにして判定するか長らく議論がされた。最終的にESMを判定する方法として.mjs拡張子が採用された

Node.jsにおいてESMを作るときには.mjsと書くようにしよう

ES2015のモジュールをCommonJSに変換する