Hello Rollup (2019年12月版)

Webpack を使ったプロジェクトを GitHub 上でホストしていたのですが、ある日からセキュリティアラートが出るようになってしまいました。そもそも FOSS4G 界隈のライブラリは ES6 に移行して Rollup.js でビルドするのが主流っぽいので、この際 Rollup に乗り換えてみました。

基本的には https://rollupjs.org/guide/en/#tutorial を読んでやっていけばよいのですが、ドキュメントが実装に追い付いていないので、その補完目的でどうぞ。

環境構築からビルドまで

delaunator というライブラリをインポートして、ランダムな100個の点をドロネー分割してその結果を出力してみます。

以下の手順を実行すると、最終的に dist/bundle.js に必要なものがバンドルされた js が生成されます。

$ npm init
$ npm install delaunator
$ npm install -D rollup @rollup/plugin-node-resolve @rollup/plugin-buble
$ vi index.js
$ vi rollup.config.js
$ rollup -c

index.js

ES6 で書かれた簡単なコードです。

index.js

import Delaunator from 'delaunator';

const points = [];
for (let i = 0; i < 100; i++)
  points.push([
    Math.floor(Math.random() * 256),
    Math.floor(Math.random() * 256)
  ]);

Delaunator.from(points).triangles.forEach(triangle => {
  console.log(triangle);
});

rollup.config.js

rollup が使用する設定ファイルです。これも ES6 です。

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import buble from '@rollup/plugin-buble';

export default {
  input: 'index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve(),
    buble()
  ]
};

• 冒頭で必要なプラグインをインポート
• input はその名の通り入力元の JS
• output は出力先、file と format が必要
• format は amd cjs esm iife umd のいずれか
• ブラウザで実行させるなら iife でよし
• plugins にはプラグインの配列を設定

dist/bundle.js

生成された JS です。delaunator のコードと index.js のコードが含まれていますね。あと const や let が var になったりアロー関数が function になっていたりが確認できます。うまくいったようです。

dist/bundle.js

(function () {
    'use strict';

    var EPSILON = Math.pow(2, -52);
    var EDGE_STACK = new Uint32Array(512);

    var Delaunator = function Delaunator(coords) {
    }

/* 中略 */

    var points = [];
    for (var i = 0; i < 100; i++)
      { points.push([Math.floor(Math.random() * 256), Math.floor(Math.random() * 256)]); }

    Delaunator.from(points).triangles.forEach(function (triangle) {
      console.log(triangle);
    });

}());

ノート

プラグイン群の移行

チュートリアルでは rollup-plugin-node-resolve のようなプラグインを使え、と書かれているのですが、NPM を見に行くと deprecated となってしまっています。更新されていません。

ここ3か月ほどで公式プラグイン群は https://github.com/rollup/plugins に開発が移行して、@rollup/* のようなパッケージ名で NPM に登録されているようになっています。

チュートリアルを見てなにか変だと思ったら https://github.com/rollup/plugins を見に行くとよいかもしれません。

@rollup/plugin-node-resolve

https://github.com/rollup/plugins/tree/master/packages/node-resolve

A Rollup plugin which locates modules using the Node resolution algorithm, for using third party modules in node_modules

Rollup が node_modules に入っている依存ライブラリを探せるようにするためのプラグインです。だいたいいつも必要になるかと。

@rollup/plugin-buble

https://github.com/rollup/plugins/tree/master/packages/buble

A Rollup which converts ES2015+ code with the Bublé compiler.

ゴールがブラウザならなにがしかトランスパイラが必要ですね。

チュートリアルでは https://github.com/rollup/rollup-plugin-babel という babel を使ったプラグインの事例が設定含めそれなりのボリュームで紹介されていてほかに選択肢がないように見えるのですが、公式が @rollup/plugin-buble を出しているのでこちらを使っています。.babelrc 云々をスキップできるのは初心者としては気楽です。

次のステップ

上記の例は ES6 で完結した世界なので、実際には commonjs とか typescript なんかのプラグインが必要になってくるかと思います。チュートリアルを追いつつ公式 https://github.com/rollup/plugins で必要なプラグインを探していくと迷子になりにくいかもしれません。