---
title: ECMAScript 6で書いたコードをBrowserify + Gulpでビルドする。
tags: ["Browserify", "ECMAScript 6", "Gulp", "JavaScript"]
categories: ["Programming", "JavaScript", "Browserify"]
date: 2014-12-28T06:24:07Z
updated: 2014-12-28T06:24:07Z
---

[2つ前の記事](http://blog.ik.am/#/entries/306)で扱った内容をECMA Script 6(ES6)で書いてみる。


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

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

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

#### greeter.js

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

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

export {Greeter};
```

#### index.js
``` javascript
import {Greeter} from './greeter.js';
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');
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

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