最近自分の開発環境は「gulp」+「WebPack」で構築しているものが多く少し別の事もしたいなぁと思ってrollup.jsを使ってみました。
rollup.jsとは？
I roll up, I roll up, I roll up, Shawty I roll up
I roll up, I roll up, I roll up –Wiz Khalifa
rollup.jsは依存性を解決するためのツールで、他にはWebPackやbrowserifyの仲間みたいなものです。
ヘッダーに 「the next-generation JavaScript module bundler」と書いてある通り、基本的にはES2015(ES6)のモジュールの管理を行います。
rollup.jsの魅力
効率的な結合
実際にすでに試した方の記事がありました。
そちらではrollup.jsで出力したものがbrowserifyをminifyしたものの半分というのが記事に載っていました。
「効率化」と「ファイルサイズを小さくする」というのはエンジニアたちの永遠のテーマみたいなものですからね。こういうのはすごく嬉しいです。
選べる出力形式
公式ページを見てもらえるとわかると思うんですが、以下の出力が行えます。
- AMD
- CommonJS
- ES2015
- Globals
- UMD
環境構築してみる
今回の環境
- Node.js v4.2.0
- npm v2.14.7
npmについてはv3以上になるとnode_modulesの中身がフラットに展開され、ファイル構成が異なりますが、重複のファイルがないだけなので気にしなくて大丈夫です（たぶん）。
rollup.jsをインストール
npm install -g rollup
以下のコマンドでバージョンが確認できればOKです。
rollup -v
ディレクトリを作成
今回は「ts-rollup」というフォルダの中にindex.htmlを作成しました。
ts-rollup
└── index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ts-rollup</title>
<style>*{margin: 0;padding: 0;}</style>
</head>
<body>
<script src="./dist/app.js"></script>
</body>
</html>
package.jsonの作成
とりあえずpackage.jsonを作ります。
--yesを付けると全ての質問を飛ばせるので、テストページなどを作るときには便利です。
npm init --yes
ts-rollup
├── index.html
└── package.json
node_modulesのインストール
rollup.js
npm install rollup --save-dev
rollup-plugin-typescript
npm install rollup-plugin-typescript --save-dev
ts-rollup
├── index.html
├── node_modules
│ ├── rollup
│ └── rollup-plugin-typescript
└── package.json
srcフォルダとtsファイルを作成
root直下にsrcフォルダを作り、中にtsフォルダを作りました。
ここにapp.tsを作ります。
ts-rollup
├── index.html
├── node_modules
│ ├── rollup
│ └── rollup-plugin-typescript
├── package.json
└── src
└── ts
└── app.ts
class Foo {
private text:string = 'test';
constructor(
private name:string = 'dummy'
){}
public alert():void {
alert(this.text);
}
public console():void {
console.log(this.name);
}
}
let foo = new Foo('sample');
foo.alert();
foo.console();
rollup.config.jsの作成
次にTypeScriptをトランスパイル（コンパイル）するための準備をしていきます。
root直下にrollup.config.jsというファイルを作ります。
import typescript from 'rollup-plugin-typescript';
export default {
entry: './src/ts/app.ts',
dest: './dist/app.js',
format: 'es6',
plugins: [
typescript()
]
}
ts-rollup
├── index.html
├── node_modules
│ ├── rollup
│ └── rollup-plugin-typescript
├── package.json
├── rollup.config.js
└── src
└── ts
└── app.ts
これで準備完了です！
トランスパイル(コンパイル)してみる
以下のコマンドでroot直下にdistフォルダと中にapp.jsができていれば成功です！
rollup -c
ts-rollup
├── dist
│ └── app.js
├── index.html
├── node_modules
│ ├── rollup
│ └── rollup-plugin-typescript
├── package.json
├── rollup.config.js
└── src
└── ts
└── app.ts
まとめ
依存性解決ツールもWebPackとbrowserifyで解決するかと思ったけどまだまだ進化を続けていますね。
自分はgulpを使う事が多いのでそういった人のためにgulp-rollupというのもあるみたいです。
まだまだpluginも少なく実用的とまではいかないかもしれませんが、「こう言ったのもあるんだなぁ〜」程度に思っておいてくれるといいかなって思います。