バンドルツール Rollup.js 入門チュートリアル

rollup.js は JavaScript のパッケージングツールです。本稿ではその基本的な使い方について説明します。

一、概要

パッケージングツールの役割は、複数の JavaScript スクリプトを一つにまとめて、ブラウザで使用する形にすることです。

ブラウザがスクリプトをパッケージングする主な理由は三つあります。

（1）初期のブラウザはモジュールをサポートしていなかったため、大規模なウェブページプロジェクトではまず一つのスクリプトにまとめてから実行する必要がありました。

（2）Node.js のモジュール機構はブラウザと互換性がなく、パッケージングツールを通じて互換性を処理する必要がありました。

（3）ブラウザが一つの大規模なスクリプトをロードする方が、複数の小規模なスクリプトをロードする場合よりも性能が良いです。

現在、最も一般的に使われているパッケージングツールは Webpack です。その機能は強力ですが、学習曲線が急で使いにくいことで、しばしば非難されています。

rollup.js の開発意図は、簡単に使える ES モジュールパッケージングツールを作ることであり、設定不要で直接使えるようにすることでした。これについては確かに実現しています。

その後、発展を重ねて、CommonJS モジュールもパッケージングできるようになりました。しかし、この時には複雑な設定が必要となり、実際には Webpack よりは簡単ではありません。

したがって、rollup.js を ES モジュールのパッケージングにのみ使用することを推奨します。そうすれば、その強みを最大限に発揮できます。以下で見るように、それはどれほど簡単なことですか。

プロジェクトで CommonJS モジュールを使用している場合は、rollup.js を使用することを推奨しません。強みはあまりありません。

ES モジュールと CommonJS モジュールの違いをまだ理解していない場合は、ES6 教程を参照してください。

二、インストール

本稿ではグローバルにrollup.jsをインストールします。


$ npm install --global rollup

しかし、インストールせずに直接使用することも可能です。その場合、以下のすべてのコマンド内のrollupをnpx rollupに置き換えます（『npx 使用ガイド』参照）。

初めて使用する場合は、以下のコマンドを実行してヘルプを確認できます。


$ rollup --help
# 或者
$ npx rollup --help

三、サンプル

以下では、rollup.jsを使って、ライブラリファイルadd.jsとエントリースクリプトmain.jsの2つの簡単なスクリプトをパッケージ化します。


// add.js
const PI = 3.14;
const E = 2.718;

export function addPi(x) {
  return x + PI;
}

export function addE(x) {
  return x + E; 
}

上記のコードでは、モジュールadd.jsがaddPi()とaddE()という2つのユーティリティ関数を出力しています。


// main.js
import { addPi } from './add.js';

console.log(addPi(10));

のコードでは、エントリースクリプトmain.jsがadd.js内のツール関数addPi()をロードしています。

次に、rollup.jsでパッケージ化します。


$ rollup main.js

パッケージ化する際には、エントリースクリプトmain.jsを指定するだけで、rollupが自動的に依存関係をパッケージ化します。

パッケージ化結果はデフォルトで画面に表示されます。


const PI = 3.14;

function addPi(x) {
  return x + PI;
}

console.log(addPi(10));

確認すると、importとexportのステートメントがなくなっており、元のコードに置き換えられています。

また、関数addE()はパッケージ化されませんでしたが、使用されていませんでした。この機能は「ツリーシェイク」と呼ばれ、パッケージ化時に使用されていないコードを自動的に削除します。

これらの点により、rollupが出力するコードは非常に整理されており、他のパッケージ化ツールよりも小さいサイズです。

パラメータ--file [FILENAME]を使用して、パッケージ化結果を指定されたファイルに保存します。


$ rollup main.js --file bundle.js

上記のコマンドは、パッケージ化結果をbundle.jsに保存します。

四、使用上の注意点

（1）複数のエントリースクリプトがある場合は、それらのファイル名を順番に記入し、パラメータ--dirを使用して出力ディレクトリを指定します。


$ rollup m1.js m2.js --dir dist

上記のコマンドは、ディレクトリdistで、m1.js、m2.js、およびそれらの共通の依存関係（ある場合）を含む複数のファイルをパッケージ化して生成します。

（2）パラメータ--format iifeは、パッケージ化結果を自動実行関数内に配置します。


$ rollup main.js --format iife

（3）パッケージ化後にコードを最小化したい場合は、パラメータ--compactを使用します。


$ rollup main.js --compact

別の方法として専用ツールを使用する方法があります。


$ rollup main.js | uglifyjs --output bundle.js

上記のコマンドは2つのステップに分かれており、最初のステップはRollupによるパッケージ化で、次のステップはUglifyJSによるコードの最小化、最後にbundle.jsに書き込みます。

（4）Rollupは設定ファイル（rollup.config.js）を使用して設定することができ、パラメータをすべてその中に書き込むことができます。以下に例を示します。


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

パラメータ-c設定ファイルを有効にする。


$ rollup -c

設定ファイルの使用は推奨しません。そうすると追加の複雑さが生じます。デフォルトのシナリオでは、コマンドラインパラメータで十分であり、より読みやすくなります。

五、CommonJSモジュールへの変換

最後に、RollupはESモジュールをCommonJSモジュールに変換することもサポートしており、パラメータを使用します。--format cjsで完了です。


$ rollup add.js --format cjs

がCommonJSモジュールに変換されたコードは以下の通りです。


'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const PI = 3.14;
const E = 2.718;

function addPi(x) {
  return x + PI;
}

function addE(x) {
  return x + E; 
}

exports.addE = addE;
exports.addPi = addPi;

（終）

おすすめ購読元