読者です 読者をやめる 読者になる 読者になる

JavaScript のモジュール管理

JavaScript のモジュール管理について、個人的メモ。

モジュール管理ライブラリ

JavaScriptECMAScript 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 で書かれたスタイルシートも、最終的に実行できる形に変換してくれる。

Windows で npm run が動かない場合

WindowsError: Cannot find module '…\webpack.config.js;' と言われ動かない場合、複数のコマンドを続けて実行するときのセミコロンが原因。Windows では ; の代わりに & を使わないといけない。