ロールアップ

English

简体中文

English

简体中文

外観

チュートリアル

最初のバンドルの作成​

開始する前に、Node.jsをインストールしてNPMを使用できるようにする必要があります。また、お使いのマシンでコマンドラインにアクセスする方法も知る必要があります。

Rollupを使用する最も簡単な方法は、コマンドラインインターフェイス（またはCLI）を使用することです。ここでは、ロールアップをグローバルにインストールします（後で、ビルドプロセスを移植できるようにプロジェクトにローカルにインストールする方法を学習します。心配しないでください）。コマンドラインに以下を入力します

シェル
npm install rollup --global
# or `npm i rollup -g` for short

rollupコマンドを実行できるようになりました。試してみてください。

シェル
rollup

引数が渡されなかったため、Rollupは使用方法を出力します。これはrollup --helpまたはrollup -hを実行することと同じです。

簡単なプロジェクトを作成してみましょう

シェル
mkdir -p my-rollup-project/src
cd my-rollup-project

まず、エントリポイントが必要です。src/main.jsという名前の新しいファイルに以下を貼り付けます

js
// src/main.js
import foo from './foo.js';
export default function () {
	console.log(foo);
}

次に、エントリポイントがインポートするfoo.jsモジュールを作成します

js
// src/foo.js
export default 'hello world!';

これでバンドルを作成する準備が整いました

シェル
rollup src/main.js -f cjs

-fオプション（--formatの略）は、作成するバンドルの種類を指定します。この場合は、CommonJS（Node.jsで実行されます）。出力ファイルを指定しなかったため、stdoutに直接印刷されます

js
'use strict';

const foo = 'hello world!';

const main = function () {
	console.log(foo);
};

module.exports = main;

バンドルをファイルとして保存することもできます

シェル
rollup src/main.js -o bundle.js -f cjs

（rollup src/main.js -f cjs > bundle.jsを実行することもできますが、後ほど説明するように、ソースマップを生成している場合は柔軟性が低くなります。）

コードを実行してみてください

node
> var myBundle = require('./bundle.js');
> myBundle();
'hello world!'

おめでとう！Rollupで最初のバンドルを作成しました。

構成ファイルの使用​

ここまで順調ですが、オプションを追加し始めるとコマンドを入力するのが少し面倒になります。

重複を避けるために、必要なすべてのオプションを含む構成ファイルを作成できます。構成ファイルはJavaScriptで記述され、生のCLIよりも柔軟です。

プロジェクトのルートにrollup.config.mjsという名前のファイルを作成し、次のコードを追加します

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

(CJS モジュールを使用できることに注意してください。したがって、module.exports = {/* config */} になります。)

設定ファイルを使用するには、-c または -c フラグを使用します。

シェル
rm bundle.js # so we can check the command works!
rollup -c

設定ファイルのオプションは、同等のコマンドラインオプションでオーバーライドできます。

シェル
rollup -c -o bundle-2.js # `-o` is equivalent to `--file` (formerly "output")

注: Rollup 自体が設定ファイルを処理するため、export default 構文を使用できます。コードは Babel や同様のものでトランスパイルされていないため、実行している Node.js のバージョンでサポートされている ES2015 機能のみを使用できます。

特に指定しない限り、デフォルトの rollup.config.mjs 以外の設定ファイルを使用できます。

シェル
rollup --config rollup.config.dev.mjs
rollup --config rollup.config.prod.mjs

ローカルに Rollup をインストールする ​

チーム内や分散環境で作業する場合、ローカル 依存関係として Rollup を追加するのが賢明です。ローカルに Rollup をインストールすると、複数の貢献者が追加の手順として Rollup を個別にインストールする必要がなくなります。しかも貢献者全員が同じバージョンの Rollup を使用できることを保証します。

NPM でローカルに Rollup をインストールするには

シェル
npm install rollup --save-dev

またはYarn で

シェル
yarn -D add rollup

インストールすると、Rollup はプロジェクトのルートディレクトリ内で実行できます。

シェル
npx rollup --config

またはYarn で

シェル
yarn rollup --config

インストールしたら、package.json に単一のビルドスクリプトを追加するのが一般的です。これにより、すべての貢献者にとって便利なコマンドが提供されます。例:

json
{
	"scripts": {
		"build": "rollup --config"
	}
}

注: ローカルにインストールされた場合、NPM と Yarn の両方が依存関係のバイナリファイルを解決し、パッケージスクリプトから呼び出されたときに Rollup を実行します。

プラグインを使用する ​

今までは、エントリポイントと相対パスでインポートされたモジュールから簡単なバンドルを作成しました。より複雑なバンドルを作成する場合は、柔軟性が必要になることがよくあります。NPM でインストールされたモジュールのインポート、Babel でのコードのコンパイル、JSON ファイルでの作業などが挙げられます。

それにはプラグインを使用します。これにより、バンドル化プロセスの重要なポイントで Rollup の動作が変更されます。優れたプラグインのリストは Rollup Awesome List で管理されています。

このチュートリアルでは、@rollup/plugin-json を使用します。これにより、Rollup は JSON ファイルからデータをインポートできます。

プロジェクトのルートに package.json というファイルを作成し、次の内容を追加します。

json
{
	"name": "rollup-tutorial",
	"version": "1.0.0",
	"scripts": {
		"build": "rollup -c"
	}
}

@rollup/plugin-json を開発依存関係としてインストールします。

シェル
npm install --save-dev @rollup/plugin-json

(コードは実行中にプラグインに依存しないため、--save ではなく --save-dev を使用しています。バンドルを構築する場合のみです。)

src/main.js ファイルを更新し、src/foo.js の代わりに package.json からインポートします。

js
// src/main.js
import { version } from '../package.json';

export default function () {
	console.log('version ' + version);
}

JSON プラグインを含めるように rollup.config.mjs ファイルを編集します。

js
// rollup.config.mjs
import json from '@rollup/plugin-json';

export default {
	input: 'src/main.js',
	output: {
		file: 'bundle.js',
		format: 'cjs'
	},
	plugins: [json()]
};

npm run build で Rollup を実行します。結果は次のようになります。

js
'use strict';

var version = '1.0.0';

function main() {
	console.log('version ' + version);
}

module.exports = main;

注: 実際に必要なデータだけがインポートされます。name、devDependencies、package.json の他の部分は無視されます。これが ツリーシェイキング の仕組みです。

出力プラグインを使用する ​

一部のプラグインは特定の出力を対象に適用することもできます。出力固有のプラグインが行えることの詳細については、プラグインフックを参照してください。簡単に言うと、これらのプラグインはRollupのメイン分析が完了した後にのみコードを変更できます。 Rollupでは互換性のないプラグインが出力固有のプラグインとして使用されている場合に警告されます。考えられるユースケースの1つは、ブラウザで消費されるバンドルの最小化です。

最小化されたビルドを非最小化されたビルドと一緒に提供するために、前の例を拡張しましょう。 そのために、@rollup/plugin-terserをインストールします。

シェル
npm install --save-dev @rollup/plugin-terser

2番目の最小化された出力の追加に対応するようにrollup.config.mjsファイルを編集します。 フォーマットとしてiifeを選択します。 このフォーマットでは、コードがラップされ、他のコードとの不要な相互作用を回避しながらブラウザでscriptタグ経由で利用できるようになります。 エクスポート値があるため、バンドルによって作成されるグローバル変数の名前を指定して、他のコードがこの変数を使用してエクスポート値にアクセスできるようにする必要があります。

js
// rollup.config.mjs
import json from '@rollup/plugin-json';
import terser from '@rollup/plugin-terser';

export default {
	input: 'src/main.js',
	output: [
		{
			file: 'bundle.js',
			format: 'cjs'
		},
		{
			file: 'bundle.min.js',
			format: 'iife',
			name: 'version',
			plugins: [terser()]
		}
	],
	plugins: [json()]
};

Rollupはbundle.jsの他に2番目のファイルbundle.min.jsを作成します。

js
var version = (function () {
	'use strict';
	var n = '1.0.0';
	return function () {
		console.log('version ' + n);
	};
})();

コード分割 ​

コード分割では、動的ロードや複数のエントリポイントのようにRollupが自動的にコードをチャンクに分割する場合があり、output.manualChunksオプションを使用して、分割するモジュールをRollupに明示的に指定する方法があります。

コード分割機能を使用して遅延ダイナミックロード（インポートされた一部のモジュールが関数の実行後にロードされる場合）を実現するには、元の例に戻り、src/foo.jsを静的にロードするのではなく動的にロードするようにsrc/main.jsを変更します。

js
// src/main.js
export default function () {
	import('./foo.js').then(({ default: foo }) => console.log(foo));
}

Rollupは動的インポートを使用して、オンデマンドでのみロードされる別個のチャンクを作成します。 Rollupに2番目のチャンクを配置する場所を知らせるために、--fileオプションを渡す代わりに、--dirオプションを使用して出力を送信するフォルダーを設定します。

シェル
rollup src/main.js -f cjs -d dist

これにより、main.jsとchunk-[hash].jsという2つのファイルが含まれるdistフォルダーが作成されます（[hash]はコンテンツベースのハッシュ文字列）。 output.chunkFileNamesオプションとoutput.entryFileNamesオプションを指定して、独自の名前付けパターンを指定できます。

コードは、以前と同じ出力を使用して実行し続けることができますが、./foo.jsのロードと解析はエクスポートされた関数を初めて呼び出したときにのみ開始するため、少し遅くなります。

シェル
node -e "require('./dist/main.js')()"

--dirオプションを使用しない場合、Rollupはチャンクを再度stdoutに出力し、コメントを追加してチャンクの境界を強調表示します。

js
//→ main.js:
'use strict';

function main() {
	Promise.resolve(require('./chunk-b8774ea3.js')).then(({ default: foo }) =>
		console.log(foo)
	);
}

module.exports = main;

//→ chunk-b8774ea3.js:
('use strict');

var foo = 'hello world!';

exports.default = foo;

使用されるまで高価な機能を読み込んで解析する場合にのみ便利です。

コード分割の別の用途は、いくつかの依存関係を共有する複数のエントリポイントを指定できることです。 この例では再び、元の例で行ったようにsrc/foo.jsを静的にインポートする2番目のエントリポイントsrc/main2.jsを追加します。

js
// src/main2.js
import foo from './foo.js';
export default function () {
	console.log(foo);
}

両方のエントリポイントをrollupに提供すると、3つのチャンクが作成されます。

シェル
rollup src/main.js src/main2.js -f cjs

出力されます。

js
//→ main.js:
'use strict';

function main() {
	Promise.resolve(require('./chunk-b8774ea3.js')).then(({ default: foo }) =>
		console.log(foo)
	);
}

module.exports = main;

//→ main2.js:
('use strict');

var foo_js = require('./chunk-b8774ea3.js');

function main2() {
	console.log(foo_js.default);
}

module.exports = main2;

//→ chunk-b8774ea3.js:
('use strict');

var foo = 'hello world!';

exports.default = foo;

エントリポイントの両方が同じ共有チャンクをインポートする方法に注目できます。Rollupはコードを複製しません。それらの代わりに、絶対に必要な最小限のみを読み込む追加チャンクを作成します。繰り返しになりますが、--dirオプションを渡すと、ファイルがディスクに書き込まれます。

ネイティブのESモジュール、AMDローダーまたはSystemJSを使用してブラウザーに対して同じコードを作成できます。

たとえば、ネイティブモジュールに対して-f esと共に

シェル
rollup src/main.js src/main2.js -f es -d dist
html
<!doctype html>
<script type="module">
	import main2 from './dist/main2.js';
	main2();
</script>

またはネイティブモジュールに対して-f systemと共に

シェル
rollup src/main.js src/main2.js -f system -d dist

SystemJSを介してインストールします

シェル
npm install --save-dev systemjs

必要に応じて、HTMLページにいずれかのエントリポイントまたは両方のエントリポイントを読み込みます

html
<!doctype html>
<script src="node_modules/systemjs/dist/s.min.js"></script>
<script>
	System.import('./dist/main2.js').then(({ default: main }) => main());
</script>

ネイティブESモジュールをサポートしているブラウザー上でそれらを使用するウェブアプリの設定方法に関する例については、rollup-starter-code-splittingを参照してください。必要に応じて、SystemJSにフォールバックします。

MITライセンスに基づいてリリースされました。

著作権 © 2015年以降現在、Rollupコントリビューター