LoginSignup
4

More than 5 years have passed since last update.

[意訳]Rollupでより良いビルドを

Last updated at Posted at 2016-02-03

このポストは、以下の記事を意訳したものです。
A Better Rollup Build
何か誤りなどありましたら、ご指摘いただけると幸いです。

(以下、意訳)

私は最近、新しいプロジェクトで試験的にRollup.jsを使っています。ES2015としてモジュールを 書き、公開できるため、私はビルドツールとしてRollupが大好きです。NodeがES2015をサポートするまでは、いまのところRollupが最適解だと思われます。


ここでは、Rollupの使い方をチュートリアルするつもりはありません。なぜなら、ここで書きたいことはそういうことではなく、Rollupを用いていかにより良いビルド環境を構築するかということを解説したいためです。あくまで私個人の経験に基づいて、ですが。

Rollupを使う一番の利点は、ES2015のモジュールを公開できること(およびTreeShaking)なので、CommonJS風に単一ファイル生成は行いません。ただし、従来の方法でモジュールを配布して欲しい人のためにいまだにCJSでビルドすることはあります。

そういった場合には2種類のビルドが必要ですが、コマンドラインや設定ファイルをベースとするRollupは、そのためのシンプルでひとまとめの方法を提供してくれません。コマンドを2度入力するか、configファイルを2つ用意する必要があるかもしれません。しかも後者の場合は、それぞれのconfigを実行するために2度コマンドを打つという、2度手間になります。

この不器用な手法は、優雅ではないし嫌な感じがします。しかし、私はRollupが提供する第三の手法である、JavaScriptAPIに注目しました。(例. Rollupのメソッドを用いてビルド対象を生成するスクリプト)

rollup.build.js
import { rollup } from 'rollup';
import babel from 'rollup-plugin-babel';

rollup({
  entry: 'index.js',
  plugins: [ babel({ presets: ['es2015-rollup'] }) ]
}).then(bundle => bundle.write({
  dest: 'dist/module.js',
  format: 'cjs',
  sourceMap: 'inline'
})).catch(error => console.log(error));

rollup({
  entry: 'index.js',
  plugins: [ babel({ presets: ['es2015-rollup'] }) ]
}).then(bundle => bundle.write({
  dest: 'dist/module.es2015.js',
  format: 'es6',
  sourceMap: 'inline'
})).catch(error => console.log(error));

この方法ならば、複数ビルド対象を1つのファイルに収めることができました。しかしまだ最高とは言いがたいです。なぜなら、Rollupコマンドを打つことで複数ビルドが実行されることが明らかではないからです。ドキュメントにもこのような独自のビルドについての情報はありませんでした。しかし、この手法を思いついた後、RollupがPromisesを使うことを思い出しました。Just lump the write out calls into one invocation!(未訳)

こちらが素晴らしくシンプルな解法です。

rollup.build.js
import { rollup } from 'rollup';
import babel from 'rollup-plugin-babel';

rollup({
  entry: 'index.js',
  plugins: [ babel({ presets: [ 'es2015-rollup' ] }) ]
}).then(bundle => Promise.all([
  bundle.write({
    dest: 'dist/module.js',
    format: 'cjs',
    sourceMap: 'inline'
  }),
  bundle.write({
    dest: 'dist/module.es2015.js',
    format: 'es6',
    sourceMap: 'inline'
  })
])).catch(error => console.log(error));


もしあなたが私と同じようにES2015でライブラリを公開したいのならば、Rollup.jsをチェックしてみることを強くオススメします。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4