IK.AM

@making's tech note


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

🗃 {Programming/JavaScript/Browserify}
🏷 Browserify 🏷 Gulp 🏷 JavaScript 🏷 TypeScript 
🗓 Updated at 2015-01-04T05:10:34Z  🗓 Created at 2015-01-04T05:10:34Z   🌎 English Page

前に扱った内容を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!

✒️️ Edit  ⏰ History  🗑 Delete