読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

モジュールバンドラの新興勢力、rollup.jsをためしてみる

こちらの記事を読みました。

qiita.com

 

どうやらrollup.jsというものが登場したようですね。browserifyやwebpackのような依存性管理ツールのようです。

実は僕が聴いているJavaScript JabberというPodcastでも紹介されており、これは触ってみるしかない!と思った次第です。

 

公式

rollup.js

 

インストール

$ mkdir try-rollup-js

$ cd try-rollup-js

$ npm i -D rollup

 

いつものnpmインストールですね。

 

プラグイン導入

必要と思われるプラグインを導入します。

$ npm i -D rollup-plugin-npm rollup-plugin-commonjs rollup-plugin-json rollup-plugin-babel babel-preset-es2015-rollup

 

.babelrc作成

package.jsonと同じディレクトリに、.babelrcファイルを作成します。

このファイル、初めて知ったのですがBabel6を使う際に推奨される設定ファイルのようですね。

 

.bablerc

f:id:chuck0523:20160122004606p:plain

 

 

rollup設定ファイルを作成

次に、rollup自体の設定ファイルを作成します。

以下のようになりました。

gist3ce3835f912d5b70feaf

 

ビルドコマンドを設定

package.jsonに追記して、rollupを利用したビルドを可能にします。

scriptsに次の1行を追加します。

"build": "rollup -c"

 

これにて、ターミナルで $npm run buildコマンドを打つことによって、指定したjsファイルがビルドされます。

 

 

まとめ

rollup.js、先人の記事のおかげでカンタンに導入することができました。明日はもっと色々な設定を試してみたいと思います。

 

この記事は全て以下のQiitaの記事を参考にして書かれています。

詳しい内容、コードの引用元については、元記事をご参照ください。

qiita.com

 

Github

今回作成したファイルをアップしました。参考程度に。

github.com