JavaScript のモジュール管理
JavaScript のモジュール管理について、個人的メモ。
モジュール管理ライブラリ
JavaScript は ECMAScript 2015 (ECMAScript 6) になるまで、他のスクリプトを参照する機能は言語機能として提供されてこなかった。しかしながらサーバサイドで動作する node.js が生まれた頃からその必要性に駆られ、さまざまなモジュール管理ライブラリが登場した。
現在メジャーなモジュール管理ライブラリは次の二つ。
- Asynchronous Module Design (AMD)
- CommonJS (CJS)
ECMAScript 2015 の登場
ECMAScript 2015 では言語機能として import 文および export 文が追加された。
Babel
現在 import 文および export 文 をサポートするブラウザはないが、Babel というツール (トランスパイラ) を使うと現在のブラウザが実行できる形に変換できる。
Babel は npm からインストールすることができる。ローカルインストールが推奨されている。
% npm install --save-dev babel-cli babel-preset-es2015
実行する前に設定ファイル .babelrc を作成する。
{ "presets": ["es2015"] }
src.js を dest.js にコンパイル
% babel src.js --output dest.js
Webpack
Webpack は JavaScript だけでなく CSS や画像も含めて管理することができるツール。TypeScript や CoffeeScript で書かれたスクリプトや、Sass や Less で書かれたスタイルシートも、最終的に実行できる形に変換してくれる。
