---
title: TypeScriptで書いたコードをBrowserify + Gulpでビルドする。
tags: ["Browserify", "Gulp", "JavaScript", "TypeScript"]
categories: ["Programming", "JavaScript", "Browserify"]
date: 2015-01-04T05:10:34Z
updated: 2015-01-04T05:10:34Z
---

[前に扱った内容](http://blog.ik.am/#/entries/306)をTypeScriptで試してみる。
(ちなみにECMAScript 6版は[こちら](http://blog.ik.am/#/entries/308)。)

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

``` bash
$ npm install --save-dev tsify
```

### TypeScriptで書き直す
元ネタをTypeScriptで書き直す

#### greeter.ts

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

export = Greeter;
```

#### index.ts
``` javascript
import Greeter = require('./greeter');
var greeter = new Greeter('World');
console.log(greeter.greet());
```

### Gulpfileを直す

``` javascript
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

``` bash
$ gulp browserify
$ node bundle.js 
Hello World!
```