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

TypeScriptで書いたコードをBrowserify + Gulpで
ビルドする。
Title
TypeScriptで書いたコードをBrowserify + Gulpでビルドする。
Category
Programming::JavaScript::Browserify
Created at
2015-01-04T14:10:34.000+09:00
Created by
making
Updated at
2015-01-04T14:10:34.000+09:00
Updated by
making
Orininal URL
http://blog.ik.am/#/entries/312
前に扱った内容を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!