TypeScriptで書いたコードをBrowserify + Gulpでビルドする。

前に扱った内容をTypeScriptで試してみる。 (ちなみにECMAScript 6版はこちら。)

tsify

TypeScriptのコードをbrowserifyでビルドできるようにするためのtsifyをインストールする。

$ npm install --save-dev tsify

TypeScriptで書き直す

元ネタをTypeScriptで書き直す

greeter.ts

class Greeter {
    constructor(public greeting: string) {
    }
    greet(): string {
        return 'Hello ' + this.greeting + '!';
    }
}

export = Greeter;

index.ts

import Greeter = require('./greeter');
var greeter = new Greeter('World');
console.log(greeter.greet());

Gulpfileを直す

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

gulp.task('browserify', function () {
    return browserify({debug: true})
	.add('./index.ts')
	.plugin('tsify', { noImplicitAny: true })
	.bundle()
	.pipe(source('bundle.js'))
	.pipe(gulp.dest('./'));
});

これでビルドすればOK

$ gulp browserify
$ node bundle.js 
Hello World!