Edited at
LIGincDay 8

rollup.jsとTypeScriptで環境構築

More than 3 years have passed since last update.

Qiita

最近自分の開発環境は「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


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というのもあるみたいです。

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