Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

speee
株式会社Speeeは「解き尽くす。未来を引きよせる。」というミッションを実現すべく、中長期的な目線で企業価値を最大化させていくため、組織・事業のStyleを大切にした永続的な価値創造を目指しています。
https://www.speee.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away