Rollup の使い方

webpack の影に隠れがちな Rollup について調べてみました。

https://rollupjs.org
https://github.com/rollup/rollup – Github

Rollup で検索してみると、Rollup、rollupjs、rollup.jsなどどうもいまいち表記が定まってない感があるので、今回はとりあえず Rollup で統一します。

さて、Rollup とはなんでしょうか。一言で言うと JavaScript 用のバンドラーです。ES6 のモジュールシステムに沿って記述された JavaScript ファイルを読み取って、1つのファイルにバンドルします。

同じバンドラーである webpack が JavaScript だけでなく CSS や HTML など様々なファイル形式をバンドル対象とするのに対し、Rollup は JavaScript のみを対象とする、職人気質なバンドラーです。

バンドラーを使ってみるにあたって、機能が豊富な webpack にとっつきづらいと感じた場合は Rollup から初めてみるのがよいかもしれません。

インストール

Rollup は Node.js 上で動作します。npm で配布されており、他のパッケージと同様に npmnpm や yarnyarn コマンドでインストール可能です。Rollup はビルド時にのみ依存するので --save-dev--save-dev フラグをつけましょう。

$ npm install --save-dev rollup

$ npm install --save-dev rollup

これでローカルに Rollup がインストールされました。npxnpx コマンドで rolluprollup コマンドが動作するか実行してみます。

$ npx rollup --version
rollup v0.66.6

$ npx rollup --version
rollup v0.66.6

バージョン情報がちゃんと出力されているので、無事インストールできたようです。

バンドル

では Rollup の主機能であるバンドルについてみていきます。

Rollup では ES6 のモジュールシステムに従ったモジュールファイルをバンドルするので、まずはモジュールを作りましょう。以下のようなファイル構成とします。

helloworld.jshelloworld.js という JavaScript ファイルを作って内容を以下のようにします。

// helloworld.js
export default function hello() {
  console.log('hello, world!');
}

// helloworld.js
export default function hello() {
  console.log('hello, world!');
}

hello()hello()関数を持った helloworldhelloworld モジュールができました。

次にエントリーポイントとなる script.jsscript.js を作って helloworldhelloworld モジュールをインポートし、hello()hello() 関数を呼び出します。

// script.js
import hello from './helloworld';

hello();

// script.js
import hello from './helloworld';

hello();

これで準備完了です。それでは Rollup で今作った2つのファイルをバンドルしてみましょう。

$ npx rollup script.js --file bundle.js --format iife

script.js → bundle.js...
created bundle.js in 46ms

$ npx rollup script.js --file bundle.js --format iife

script.js → bundle.js...
created bundle.js in 46ms

--file--file オプションは出力ファイル名を、--format--format は後述する出力フォーマットを指定しています。

そしてできあがったファイルがこちらです。

(function () {
  'use strict';

  // helloworld.js
  function hello() {
    console.log('hello, world!');
  }

  // script.js

  hello();

}());

(function () {
  'use strict';

  // helloworld.js
  function hello() {
    console.log('hello, world!');
  }

  // script.js

  hello();

}());

ブラウザ上で実行可能な JavaScript ファイルとなりました。バンドル時のオプション --format--format に iifeiife を指定することで、ブラウザ上で実行可能な JavaScript としてバンドルすることができます。

出力フォーマット

Rollup は入力としてのモジュール形式は ES6 のモジュールのみですが、バンドル結果のモジュールフォーマットは複数の中から選択できます。

選択可能なモジュールフォーマットは以下の通りです。

• AMD (amdamd)
• CommonJS (cjscjs)
• ES (esmesm)
• IIFE (iifeiife)
• UMD (umdumd)
• SystemJS (systemsystem)

IIFE は即時実行関数式の略で、ブラウザ用に使用されます。

例えばバンドルした結果を CommonJS のモジュールとして使用したいと言う場合は以下のように --format--format に cjscjs を指定すれば、バンドル結果を CommonJS 用モジュールのフォーマットで出力してくれます。

$ npx rollup script.js --file bundle.js --format cjs

$ npx rollup script.js --file bundle.js --format cjs

設定ファイル

上の例ではコマンドにいくつかオプションをつけて Rollup を実行しましたが、コマンドのたびにオプションをつけるのは面倒です。そのため、Rollup ではバンドル時の設定を設定ファイルとしてまとめておくことができます。

設定ファイルはプロジェクトルートに rollup.config.jsrollup.config.js というファイル名で保存します。.js.js という拡張子からも分かる通り、設定は JavaScript の構文で記述します。

// rollup.config.js
export default {
  input: 'script.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  }
};

// rollup.config.js
export default {
  input: 'script.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  }
};

上記の設定ファイル例は、

$ rollup script.js --file bundle.js --format iife

$ rollup script.js --file bundle.js --format iife

のコマンドを設定ファイルとしてまとめたものです。

設定ファイルを使用する場合は rolluprollup コマンドに --config--config または -c-c フラグをつけます。

$ npx rollup -c

$ npx rollup -c

webpack のように暗黙的に設定ファイルの読み込みを行なってくれないので、設定ファイルを使用する場合は --config--config または -c-c の指定を忘れないようにしましょう。

プラグイン

Rollup には多くのフックが用意されており、プラグインという形で機能の追加ができるようになっています。

今までに多くのプラグインが作成されており、その中でも使用頻度が高いものや使い勝手の良いものが the Rollup Awesome List としてまとめられています。

例として、Rollup に Babel のトランスパイル機能を付加する rollup-plugin-babelrollup-plugin-babel プラグインを使ってみましょう。

まずプラグインと Babel をインストールします。

$ npm install --save-dev rollup-plugin-babel @babel/core @babel/preset-env

$ npm install --save-dev rollup-plugin-babel @babel/core @babel/preset-env

そして Babel で変換されることを期待して、先ほど作った helloworld.jshelloworld.js を class で書き換えます。

// helloworld.js
export default class HelloWorld {
  hello() {
    console.log('hello.');
  }
}

// helloworld.js
export default class HelloWorld {
  hello() {
    console.log('hello.');
  }
}

script.jsscript.js 側もそれに合わせて書き換えます。

// script.js
import HelloWorld from './helloworld';

const helloworld = new HelloWorld();
helloworld.hello();

// script.js
import HelloWorld from './helloworld';

const helloworld = new HelloWorld();
helloworld.hello();

最後に rollup.config.jsrollup.config.js で rollup-plugin-babelrollup-plugin-babel プラグインの有効化と Babel の設定をします。

// rollup.config.js
import babel from 'rollup-plugin-babel';

export default {
  input: 'script.js',
  plugins: [
    babel({
      'presets': [
        '@babel/preset-env'
      ]
    })
  ],
  output: {
    file: 'bundle.js',
    format: 'iife'
  }
};

// rollup.config.js
import babel from 'rollup-plugin-babel';

export default {
  input: 'script.js',
  plugins: [
    babel({
      'presets': [
        '@babel/preset-env'
      ]
    })
  ],
  output: {
    file: 'bundle.js',
    format: 'iife'
  }
};

これで準備完了です。rolluprollup コマンドでバンドルしましょう。

$ npx rollup -c

$ npx rollup -c

出来上がった bundle.jsbundle.js がこちらです。

(function () {
  'use strict';

  function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  }

  function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    return Constructor;
  }

  // helloworld.js
  var HelloWorld =
  /*#__PURE__*/
  function () {
    function HelloWorld() {
      _classCallCheck(this, HelloWorld);
    }

    _createClass(HelloWorld, [{
      key: "hello",
      value: function hello() {
        console.log('hello.');
      }
    }]);

    return HelloWorld;
  }();

  // script.js
  var helloworld = new HelloWorld();
  helloworld.hello();

}());

(function () {
  'use strict';

  function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  }

  function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    return Constructor;
  }

  // helloworld.js
  var HelloWorld =
  /*#__PURE__*/
  function () {
    function HelloWorld() {
      _classCallCheck(this, HelloWorld);
    }

    _createClass(HelloWorld, [{
      key: "hello",
      value: function hello() {
        console.log('hello.');
      }
    }]);

    return HelloWorld;
  }();

  // script.js
  var helloworld = new HelloWorld();
  helloworld.hello();

}());

無事 class が function に変換されました。

おわり

以上が Rollup の基本的な使い方です。webpack と比べると基礎となる機能はシンプルですが、プラグインを使えばそれに劣らない機能をつけることもできます。

Rollup はシンブルな分、スモールステップで習得ができます。使ったことがない方はぜひ試してみてください。