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を使用することをお勧めします。次のコンテンツでは、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を使用して、ライブラリファイル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は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ステートメントが消え、元のコードに置き換えられていることがわかります。さらに、関数addE()はmain.jsで使用されていないためバンドルされていません。この機能はツリーシェイキングと呼ばれ、バンドル中に未使用のコードを自動的に削除します。上記の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;

Leapcell：Webホスティング、非同期タスク、およびRedisに最適なサーバーレスプラットフォーム

最後に、JavaScriptプロジェクトをデプロイするための最適なプラットフォームLeapcellをお勧めします

1. 多言語サポート

JavaScript、Python、Go、またはRustで開発します。

2. 無制限のプロジェクトを無料でデプロイする

使用量に対してのみ支払い — リクエストもチャージもありません。

3. 比類のない費用対効果

アイドル時の料金なしで従量課金。
例：25ドルで、平均応答時間60ミリ秒で694万件のリクエストをサポートします。

4. 合理化された開発者エクスペリエンス

簡単なセットアップのための直感的なUI 。
完全に自動化されたCI / CDパイプラインとGitOps統合。
実用的な洞察のためのリアルタイムのメトリックとロギング。

5. 簡単なスケーラビリティと高いパフォーマンス

高い同時実行性を簡単に処理するための自動スケーリング。
運用上のオーバーヘッドはゼロ — 構築に集中するだけです。

ドキュメントで詳細をご覧ください！

Leapcell Twitter：https://x.com/LeapcellHQ

Mastering Rollup.js: A Deep Dive