導入

• 概要
• インストール
• クイックスタート
• 理由
• ツリーシェイキング
• 互換性
  • CommonJSのインポート
  • ESモジュールの公開

概要

Rollupは、JavaScript用のモジュールバンドラーであり、小さなコードをライブラリやアプリケーションなどのより大きく複雑なコードにコンパイルします。ES6版JavaScriptに含まれるコードモジュールの新しい標準化された形式を使用し、CommonJSやAMDなどの以前の独自ソリューションの代わりに使用します。ESモジュールを使用すると、お気に入りのライブラリから最も便利な個々の関数を自由にシームレスに組み合わせることができます。これは最終的にはすべての場所でネイティブに可能になりますが、Rollupを使用すると、今日からそれを行うことができます。

インストール

npm install --global rollup

これにより、Rollupをグローバルコマンドラインツールとして使用できるようになります。ローカルにインストールすることもできます。Rollupのローカルインストールを参照してください。

クイックスタート

Rollupは、オプションの構成ファイルを使用したコマンドラインインターフェース、またはJavaScript APIのいずれかを使用して使用できます。使用可能なオプションとパラメーターを表示するには、rollup --helpを実行します。

Rollupを使用したライブラリとアプリケーションの例については、rollup-starter-libとrollup-starter-appを参照してください。

これらのコマンドは、アプリケーションのエントリポイントがmain.jsという名前で、すべてのインポートがbundle.jsという名前の単一ファイルにコンパイルされることを前提としています。

ブラウザ用

# compile to a <script> containing a self-executing function ('iife')
rollup main.js --file bundle.js --format iife

Node.js用

# compile to a CommonJS module ('cjs')
rollup main.js --file bundle.js --format cjs

ブラウザとNode.jsの両方用

# UMD format requires a bundle name
rollup main.js --file bundle.js --format umd --name "myBundle"

理由

ソフトウェア開発は、プロジェクトをより小さな個別の部分に分割すると通常は容易になります。これは、予期しない相互作用が排除され、解決する必要がある問題の複雑さが劇的に軽減されることが多いためです。そして、最初から小さなプロジェクトを書く方が良いという単純な答えではないこともあります。残念ながら、JavaScriptは歴史的にこの機能を言語のコア機能として含んでいませんでした。

これは、JavaScriptのES6改訂版でついに変更されました。ES6版には、関数をインポートおよびエクスポートし、それらを個別のスクリプト間で共有できるようにするための構文が含まれています。仕様は現在固定されていますが、最新のブラウザでのみ実装されており、Node.jsでは最終決定されていません。Rollupを使用すると、新しいモジュールシステムを使用してコードを記述し、それをCommonJSモジュール、AMDモジュール、IIFEスタイルのスクリプトなど、既存のサポートされている形式にコンパイルできます。つまり、将来性のあるコードを記述することができ、また…の大きな利点も得られます。

ツリーシェイキング

ESモジュールの使用を有効にすることに加えて、Rollupはインポートしているコードを静的に分析し、実際に使用されていないものを除外します。これにより、追加の依存関係を追加したり、プロジェクトのサイズを膨らませたりすることなく、既存のツールやモジュールを基に構築できます。

たとえば、CommonJSでは、ツールまたはライブラリ全体をインポートする必要があります。

// import the entire utils object with CommonJS
const utils = require('./utils');
const query = 'Rollup';
// use the ajax method of the utils object
utils.ajax(`https://api.example.com?search=${query}`).then(handleResponse);

ESモジュールでは、utilsオブジェクト全体をインポートする代わりに、必要なajax関数を1つだけインポートできます。

// import the ajax function with an ES6 import statement
import { ajax } from './utils';
const query = 'Rollup';
// call the ajax function
ajax(`https://api.example.com?search=${query}`).then(handleResponse);

Rollupは最小限のものを含むため、より軽量で高速で、複雑さの少ないライブラリとアプリケーションになります。このアプローチでは、明示的なimportステートメントとexportステートメントを使用できるため、コンパイルされた出力コードで未使用の変数を検出するために自動ミニファイアを実行するよりも効果的です。

互換性

CommonJSのインポート

Rollupは、プラグインを介して既存のCommonJSモジュールをインポートできます。

ESモジュールの公開

ESモジュールをNode.jsやwebpackなど、CommonJSで動作するツールですぐに使用できるようにするには、Rollupを使用してUMDまたはCommonJS形式にコンパイルし、package.jsonファイルのmainプロパティでそのコンパイル済みバージョンを指定できます。package.jsonファイルにmoduleフィールドもある場合、Rollupやwebpack 2+などのESモジュール対応ツールは、ESモジュールバージョンを直接インポートします。