JavaScript
TypeScript
rollup.js
LIGincDay 8

rollup.jsとTypeScriptで環境構築

More than 1 year has 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も少なく実用的とまではいかないかもしれませんが、「こう言ったのもあるんだなぁ〜」程度に思っておいてくれるといいかなって思います。