IK.AM

2つ前の記事で扱った内容をECMA Script 6(ES6)で書いてみる。

es6ify

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

$ npm install --save-dev es6ify

ES6で書き直す

元ネタをES6で書き直す

greeter.js

class Greeter {
    constructor(greeting) {
        this.greeting = greeting;
    }

    greet() {
        return 'Hello ' + this.greeting + '!';
    }
}

export {Greeter};

index.js

import {Greeter} from './greeter.js';
var greeter = new Greeter('World');
console.log(greeter.greet());

Gulpfileを直す

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

gulp.task('browserify', function () {
    return browserify({debug: true})
        .add(es6ify.runtime)
        .transform(es6ify)
        .require(require.resolve('./index.js'), {entry: true})
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./'));
});

index.jsの位置がここじゃないとエラーになった。

これでビルドすればOK

$ gulp browserify
$ node bundle.js 
Hello World!