Rollupとは何か？JavaScriptモジュールバンドラーを解説

Rollupは、小さくクリーンでtree-shakingされた出力の生成に優れたJavaScriptバンドラーであり、ライブラリで好んで使われ、Viteのプロダクションbuildを支える基盤となっています。

Rollupは、ESモジュールの静的解析を活用することで、使われないコードを削ぎ落とすtree-shakingを広めました。複数のフォーマットで無駄のないbundleを生成するため、ライブラリを公開する際に最適なバンドラーであり、Vite内部のプロダクションバンドラーでもあります。

Rollupとは

Rollupは、ESモジュールを受け取り、それらを単一のファイルまたは少数のファイルにまとめるJavaScript向けのモジュールバンドラーです。複数のフォーマット（ESM、CommonJS、UMD）で出力するため、ライブラリを多くの利用者向けに配布でき、絞り込まれたプラグインAPIを通じて拡張されます。

Tree-shakingとクリーンな出力

ESモジュールは静的に解析可能なため、Rollupは実際に使われているexportを判別して残りを除外でき、より小さなbundleを生成します。また、より重いバンドラーが付加するラッパーのボイラープレートなしに、フラットで読みやすい出力を生成する傾向があります。これは、他者が中身を確認するライブラリを配布する際に重要です。

configの例

ライブラリ向けのconfigは、単一のinputから複数のフォーマットを出力します。

A minimal rollup.config.js

export default {
  input: "src/index.js",
  output: [
    { file: "dist/lib.cjs", format: "cjs" },
    { file: "dist/lib.mjs", format: "es" }
  ]
};

CI/CDでの役割

CIでは、Rollupは公開前にライブラリの配布用artifactをbuildするか、アプリ向けにViteのプロダクションバンドラーとして動作します。buildステップはリリースpipelineの一部であり、多くの場合npmへのpublishが続きます。node_modulesをcacheし、可能な場合はbuild出力を再利用することで、これらのステップを高速に保てます。

代替ツール

Webpackは複雑なアプリ向けに機能が豊富ですが、より重量級です。esbuildはより高速ですが、ライブラリ公開向けには最適化の度合いが低い出力を生成します。tsupは、シンプルなライブラリbuild向けにesbuildをラップします。Rollupは、ライブラリ配布のように出力品質とtree-shakingが重要な場合に、依然として好まれる選択肢です。

重要なポイント

Rollupは、複数のフォーマットで小さくクリーンでtree-shakingされたbundleを生成します。
ライブラリ公開の標準であり、Viteのプロダクションbuildを支えています。
CIではリリース用のartifactをbuildし、多くの場合npmへの公開直前に実行されます。