rollup.js とは

ES6ネイティブなモジュールバンドラ。
簡単に言うと、なんでもかんでもまずES6として依存性解決をした上で、それをbabel等で任意のものに変換しようというもの。内部処理がES6を前提としている、ということです。

ES6ネイティブのいいところ

ES6でのモジュール機構(import/export)の仕組みは、静的であるというのが一番の利点です。静的というのは、コンパイル時に諸々いい感じになるということです。従来の(生の)JavaScriptにはコンパイルの概念がなく基本的には依存関係でも変数でも何でも実行時に決まるものですが、これがコンパイル時に決まるということです。

Tree-shaking

閑話休題。rollup.jsがES6ベースであることで得られる大きなメリットの一つが、Tree-shakingだそうです(公式より)。つまるところDead Code Eliminationっぽいです。   具体的には、内部で不要なexportを削除してくれるということです。Dead Code Eliminationしてくれるという点は、コンパイルと呼ぶにふさわしいですね。

How to use

インストール

rollup.jsのインストール
npm install -D rollup
関連するプラグインのインストール
  • rollup-plugin-node-resolve - これないとnom-modulesが使えない
  • rollup-plugin-commonjs - これないとCommonJSを読み込めない
  • rollup-plugin-babel - 今回はbabeってES5を吐き出すところまでする
  • babel-preset-es2015-rollup - 同上
npm i -D rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-babel babel-preset-es2015-rollup

コンフィグファイル

rollup.config.js
.babelrc いつものアレ
{
  "presets": [ "es2015-rollup" ]
}
package.json こっちもいつものアレ
{
	scripts: {
		"build" : "rollup -c"  // コンフィグを利用する場合は -c / --config
	}
}

実行

npm run build

かんそう

コンフィグファイルもすっきりしてて読みやすいし、Tree-shakingもイケてる考え方だし、導入のハードルも高くないし、いい感じのような気がします。とは言え、こういう噛ませ役はいずれなくなってくれることを願って、置き換えの効く最小のものを利用するという考え方が一番な気がしますね。