gulpを使ってES6のJavaScriptをブラウザ用にビルドする

gulpを使ったJavaScript(とCoffeeScript)のビルド - Qiita
の続き。

babelifyのインストール

$ npm install --save-dev babelify

ES6で記述する

foo.es6

export default class Foo {
  constructor(x, y) {
    this._x = x;
    this._y = y;
  }

  sum() {
    return this._x + this._y;
  }

  diff() {
    return this._x - this._y;
  }
}

example.es6

import Foo from './foo.es6';

var foo = new Foo(4, 6);

console.log(foo);
console.log(foo.sum());
console.log(foo.diff());

gulpfile.coffee

gulpfile.coffee

gulp = require 'gulp'
source = require 'vinyl-source-stream'
browserify = require 'browserify'
babelify = require 'babelify'

gulp.task 'build-es6', ->
  browserify('./src/sample.es6')
    .transform(babelify)
    .bundle()
    .pipe source 'bundle-es6.js'
    .pipe gulp.dest 'build'

gulp.task 'default', ['build-es6']

ビルドと実行

$ gulp
[19:47:51] Requiring external module coffee-script/register
[19:47:52] Using gulpfile ~/test/node/build_test/gulpfile.coffee
[19:47:52] Starting 'build-es6'...
[19:47:52] Finished 'build-es6' after 231 ms
[19:47:52] Starting 'default'...
[19:47:52] Finished 'default' after 22 μs

$ node build/bundle-es6.js 
{ _x: 4, _y: 6 }
10
-2

参考

ES6時代のJavaScript - クックパッド開発者ブログ
ECMAScript 6: New Features: Overview and Comparison
JavaScript - React.js + Babel + Browserify + gulp の環境を作ってみた - Qiita