Rollup.js徹底攻略: 最適なバンドル手法

Posted at 2025-02-10

Leapcell: Webホスティング、非同期タスク、Redisのための最高のサーバレスプラットフォーム

Rollup.jsの基本的な使い方入門

Rollup.jsはJavaScriptのバンドルツールです。この記事では、その基本的な使い方を詳細に紹介します。

I. 紹介

バンドルツールの役割

バンドルツールは、複数のJavaScriptスクリプトを1つのスクリプトに結合し、ブラウザで使用できるようにします。ブラウザがスクリプトのバンドルを必要とする主な理由は3つあります：

初期のブラウザのモジュールサポートの問題：初期のブラウザはモジュールをサポートしていませんでした。大規模なWebプロジェクトでは、複数のスクリプトを実行前に1つのスクリプトに結合する必要がありました。
モジュールメカニズムの互換性：Node.jsのモジュールメカニズムはブラウザと互換性がありません。バンドルツールを通じて処理する必要があり、ブラウザで適切に使用できるようになります。
パフォーマンス最適化：パフォーマンスの観点から、ブラウザが1つの大きなスクリプトを読み込む方が、複数の小さなスクリプトを読み込むよりも良いです。これは、HTTP要求の数を減らすため、読み込み効率が向上するからです。

現在、最も一般的に使用されているバンドルツールはWebpackです。それは強力で、ほとんどすべての種類の複雑なバンドル要件を満たすことができます。ただし、その設定は複雑で、学習コストが高く、使用するのが比較的面倒であり、これは常に開発者に批判されてきました。

Rollup.jsは、使いやすいESモジュールバンドルツールを作成するという意図で開発されました。ユーザーは複雑な設定なしで直接使用できます。この点で、それは本当にうまくいっています。継続的な開発により、Rollup.jsはCommonJSモジュールのバンドル機能も獲得しました。ただし、CommonJSモジュールをバンドルするときは、複雑な設定が必要です。この場合、実際にはWebpackよりもはるかに簡単ではありません。

したがって、Rollup.jsはESモジュールのバンドルにのみ使用することをお勧めします。これにより、その利点を最大限に引き出すことができます。以下の内容では、Rollup.jsを使用してESモジュールをバンドルするのがどれほど簡単かを示します。あなたのプロジェクトがCommonJSモジュールを使用している場合は、Rollup.jsはあまりお勧めできません。なぜなら、その利点が明らかではないからです。ESモジュールとCommonJSモジュールの違いについてあまり知らない場合は、ES6チュートリアルを参照することができます。

II. インストール

この記事では、Rollup.jsをグローバルにインストールします。コマンドは以下の通りです：

$ npm install --global rollup

ただし、インストールなしでも使用できます。方法は、すべてのコマンドの rollup を npx rollup に置き換えることです。

初めて使用するときは、以下のコマンドを実行してヘルプ情報を表示できます：

$ rollup --help
# または
$ npx rollup --help

III. 例

次に、Rollup.jsを使用して2つの簡単なスクリプト：ライブラリファイル add.js とエントリースクリプト main.js をバンドルします。

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 は2つのユーティリティ関数 addPi() と addE() をエクスポートしています。

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 ステートメントが消え、元のコードに置き換えられていることがわかります。また、main.js で使用されていなかったため、関数 addE() はバンドルされていません。この機能はトリーシェイキングと呼ばれ、つまりバンドル中に使用されていないコードを自動的に削除することです。上記の2点により、Rollupが出力するコードは非常にクリーンで、他のバンドルツールよりもサイズが小さくなります。

バンドル結果を指定したファイルに保存したい場合は、パラメータ --file [FILENAME] を使用できます。コマンドは以下の通りです：

$ rollup main.js --file bundle.js

上記のコマンドは、バンドル結果を bundle.js ファイルに保存します。

IV. 使用上の注意点

複数のエントリースクリプト

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

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

上記のコマンドは、dist ディレクトリにバンドルして複数のファイルを生成します。これには m1.js、m2.js およびそれらの共通の依存関係（あれば）が含まれます。

自動実行関数のラップ

パラメータ --format iife を使用すると、バンドル結果が即時実行関数式の中に配置されます。コマンドは以下の通りです：

$ rollup main.js --format iife

コードの最小化

バンドル後のコードを最小化したい場合は、パラメータ --compact を使用できます。コマンドは以下の通りです：

$ rollup main.js --compact

また、専用のツールを使用してコードの最小化を実現することもできます。例えば：

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

上記のコマンドは2つのステップで実行されます。最初のステップはRollupでバンドルすることで、2番目のステップは uglifyjs を使用してコードを最小化することです。最後に、結果を bundle.js ファイルに書き込みます。

設定ファイル

Rollupは設定ファイル（rollup.config.js）の使用をサポートしており、すべてのパラメータをここに記述します。以下は例です：

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

パラメータ -c を使用して設定ファイルを有効にします。コマンドは以下の通りです：

$ rollup -c

ただし、設定ファイルの使用はお勧めしません。なぜなら、それは追加の複雑さをもたらすからです。デフォルトのシナリオでは、コマンドラインパラメータで十分であり、コマンドラインパラメータの表現も読みやすいです。

V. 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;