gulp + browserify + tsifyを利用してTypeScriptコンパイル環境を作る

最近TypeScriptを書いている。TypeScriptはそのままではブラウザで動かないのでコンパイルしてES5の形式にする必要がある。tscを使えば普通にコンパイル出来るのだが、今回はgulp + browserify + tsifyを利用したTypeScriptコンパイル環境を作ってみたのでメモしておく。

必要なnodeモジュールのインストール

typescript, gulp, browserify, vinyl-source-stream, tsifyが必要。

# globalにtypescriptを入れる
npm install -g typescript

# ビルドに必要なモジュールを入れる
npm install gulp --save-dev
npm install browserify --save-dev
npm install vinyl-source-stream --save-dev
npm install tsify --save-dev

tsconfig.jsonを用意する

TypeScriptをコンパイルするために、コンパイル用の設定を用意しておく。TypeScriptのコンパイラはtsconfig.jsonというのを見てくれるし、tsifyもこれを見てくれるようなので、tsconfig.jsonを用意する。tsconfig.jsonについては https://github.com/Microsoft/TypeScript/wiki/tsconfig.json を参考に。またcompierOptionsについては https://github.com/Microsoft/TypeScript/wiki/Compiler-Options を参考に。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES5"
    },
    "exclude": [
        "node_modules"
    ]
}

とりあえず適当にこんな感じ。

moduleオプションにcommonjsを指定して、外部モジュールをコンパイルする時にcommonjs形式で出力するようにする
- この辺詳しくはTypeScriptで複数ファイル構成する2つの方法 - teppeis blog を参照
target ES5でES5の仕様にコンパイル

gulpでビルドする環境を作る

browserify + tsifyという組み合わせでやってみる。src/ts/app.tsをエントリーポイントとして、static/js/app.jsに出力するための設定はこんな感じ。

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');

gulp.task('build-ts', function () {
    return browserify({
        entries: './src/ts/app.ts'
    }).plugin('tsify')
        .bundle()
        .pipe(source('app.js'))
        .pipe(gulp.dest('./static/js'));
});

browserifyでtsifyプラグインを有効にして、bundleを呼ぶ。その後vinyl-source-streamでvinylに変換し出力している。以前も書いたけどこの辺は gulp と browserify と vinyl の話 - <body> を参考に。

TypeScriptのファイルを書いてみる

src/ts/以下にファイルを作ってみる。

まず適当に外部モジュール用ファイルを作る。module1.tsとmodule2.tsという単純な構造の外部モジュールを二つ作成する。

src/ts/module1.ts

export default function (): string {
    return "module1";
}

src/ts/module2.ts

export default function (): string {
    return "module2";
}

次にエントリーポイントとなるapp.tsファイルを作成する。この中では先ほど定義した二つの外部モジュールをimportし、それを利用しているだけ。

src/ts/app.ts

"use strict";

import module1 from "./module1";
import module2 from "./module2";

alert(module1());
alert(module2());

これでファイルを作成できた。

TypeScriptのファイルをコンパイルする

ここまででTypeScriptのビルドの準備が出来た。あとは以下のコマンドを実行することで、src/ts/app.tsをエントリーポイントとして、依存モジュールを解決してくれて、static/js/app.jsの一つのファイルにコンパイルされる。

./node_modules/.bin/gulp build-ts

実行するとstatic/js/app.jsには以下のように出力され、コンパイルが成功していることが分かる。

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";
var module1_1 = require("./module1");
var module2_1 = require("./module2");
alert(module1_1.default());
alert(module2_1.default());

},{"./module1":2,"./module2":3}],2:[function(require,module,exports){
function default_1() {
    return "module1";
}
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = default_1;

},{}],3:[function(require,module,exports){
function default_1() {
    return "module2";
}
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = default_1;

},{}]},{},[1]);

まとめ

今回はgulpでの最低限のTypeScriptコンパイル環境を作ったのでまとめてみた。最初から全部一気にやろうとするとよく分からなくなるのでこういう感じで１つずつ最小限の仕組みで動くように作ってみると勉強になる。

今回のはもちろん前回書いたJSをbrowserifyでビルドし、ライセンスコメントを適切に残す - $shibayu36->blog; と組み合わせて、typescriptをコンパイルしてnpmのモジュールを利用し、licenseも残すみたいなことも出来る。その方法については、まだnpmのモジュールをTypeScriptから用いる方法についても書いてないので、また次の機会に回す。