Hello Rollup (2019年12月版)

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

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


# 環境構築からビルドまで

[delaunator](https://www.npmjs.com/package/delaunator) というライブラリをインポートして、ランダムな100個の点をドロネー分割してその結果を出力してみます。

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

```bash
$ 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 となってしまっています。更新されていません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82494/1a01eadb-5b6a-b58f-bfdc-58517aa46ff2.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82494/7e985979-89bc-3048-3824-f7bb401bd3fc.png)

## @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> で必要なプラグインを探していくと迷子になりにくいかもしれません。