JavaScript バンドルツール Rollup を試した
ウェブアプリ向けの JavaScript のバンドル (ビルド) に、普段は Browserify を使っているが、最近 Rollup というバンドルツールを目にしたので試してみた。
Rollup の特徴や使用例、感想などをメモしておく。
基本は ES6 modules
Rollup においては、モジュールシステムは ES6 modules の記法 (import React from 'react' という感じのやつ) で書くことが基本となる。
とはいえ現状、npm にあるパッケージの多くは、モジュールシステムが CommonJS の記法 (module.exports とか require('react') という感じのやつ) で書かれている。Rollup でこれに対応するためには、プラグイン rollup-plugin-commonjs を使う必要がある。
プラグイン方式
Rollup はプラグイン方式を採っている。
例えば npm でインストールしたパッケージをバンドルするためには、上で述べた rollup-plugin-commonjs の他に、node_modules 以下からモジュールを探すためのプラグイン rollup-plugin-node-resolve を使う必要がある。
そしてこのようなプラグインを使ったビルドプロセスを、デフォルト名 rollup.config.js という設定ファイルに定義する。
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
export default {
entry: 'src/scripts/main.js',
dest: 'dist/bundle.js',
plugins: [
nodeResolve({
jsnext: true
}),
commonjs()
]
}
他の例として、ファイルの変更検知してインクリメンタルビルドするためには rollup-watch パッケージをインストールする必要がある (正確にはプラグインというカテゴリに入るものではないと思うけど)。これをインストールした上で Rollup の CLI オプション --watch を指定することで実際に機能させることができる。
React アプリをバンドルするプロジェクト構成例
Rollup + React オンリーの最小構成プロジェクトを作った。
https://github.com/keik/hello-rollup
package.json 内に npm-scripts として build と watch のタスクを定義している。
この僅かなサンプルの中に、以下2つほどポイントがある。
- React の JSX をトランスフォームするため Babel + babel-preset-react とかが必要なので、Rollup で Babel するためのプラグイン rollup-plugin-babel を使っている。これを使って、あとはいつもどおり .babelrc に presets の設定を書けばいい。
- React がフレームワーク内で
process.envを参照する際、未定義オブジェクトへのReferenceErrorが起きる。これを回避するため、rollup-plugin-env を使ってバンドル時にprocess.envに定数を設定している。
ググってすぐ解決できるレベルだけど、これだけなのになんかいろいろあるなあって感じで面倒くさい感じになってた。
