rollup.jsとTypeScriptで環境構築


![Qiita](https://camo.githubusercontent.com/8ba7fc0fcd3ee07788fa576fe43f297d58514c32/687474703a2f2f737667706f726e2e636f6d2f6c6f676f732f726f6c6c75706a732e737667)

最近自分の開発環境は「gulp」+「WebPack」で構築しているものが多く少し別の事もしたいなぁと思ってrollup.jsを使ってみました。



## rollup.jsとは？

- [rollup.js公式ページ](http://rollupjs.org/)
- [github](https://github.com/rollup/rollup)

>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
```

```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
```

```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というファイルを作ります。

```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](https://github.com/mcasimir/gulp-rollup)というのもあるみたいです。

まだまだpluginも少なく実用的とまではいかないかもしれませんが、「こう言ったのもあるんだなぁ〜」程度に思っておいてくれるといいかなって思います。