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

JavaScript バンドルツール Rollup を試した

javascript rollup browserify

ウェブアプリ向けの 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 として buildwatch のタスクを定義している。

この僅かなサンプルの中に、以下2つほどポイントがある。

  • React の JSX をトランスフォームするため Babel + babel-preset-react とかが必要なので、Rollup で Babel するためのプラグイン rollup-plugin-babel を使っている。これを使って、あとはいつもどおり .babelrc に presets の設定を書けばいい。
  • React がフレームワーク内で process.env を参照する際、未定義オブジェクトへの ReferenceError が起きる。これを回避するため、rollup-plugin-env を使ってバンドル時に process.env に定数を設定している。

ググってすぐ解決できるレベルだけど、これだけなのになんかいろいろあるなあって感じで面倒くさい感じになってた。

感想

  • 出力がきれい。
  • ビルド速度は Browserify とそんなに変わらない。
  • プラグイン方式なので流行次第でエコシステムが捗りそうだがセットアップが少々面倒。
  • 上記を踏まえた上で、自分の実力では有効なユースケースが思い浮かばなかった。しばらく Browserify 使い続けると思う。