溝畑です。
最近、JavaScriptのサンプルソースを見ていると、ES6の構文が使われていることが増えてきました。
React.jsもv0.13からES6のclass構文で書けるようになっていますし、
Cycle.jsのサンプルを見ると、ES6の構文を使用して書かれています。
すぐに実践導入できるかと言われると...対応状況のことや、
古いブラウザへの対応などのこともあり、導入し辛いのが現状だと思います。
ですが、試しておきたいし、慣れておきたい。
そこで、ES6→ES5のトランスパイラである、babelを使うと良いです。
今回はgulpを使用して、browserify + babelifyの例。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
var gulp = require('gulp'); var browserSync = require('browser-sync'); var browserify = require('browserify'); var babelify = require('babelify'); var source = require('vinyl-source-stream'); var watch = require('gulp-watch'); gulp.task('serve', function (done) { browserSync({ open: false, port: 9000, server: { baseDir: ['.'], middleware: function (req, res, next) { res.setHeader('Access-Control-Allow-Origin', '*'); next(); } } }, done); }); gulp.task('watch', ['serve'], function () { watch(['./src/**/*.js'], function () { gulp.start('build'); }); watch(['./build/bundle.js'], browserSync.reload); }); gulp.task('build', function () { browserify(['./src/app.js']) .transform(babelify) .bundle() .on('error', function (err) { console.log(err.message); this.emit('end'); }) .pipe(source('bundle.js')) .pipe(gulp.dest('./build/')); }); gulp.task('default', ['watch']); |
aureliaを試したときにBrowserSyncが便利だったので、そのまま引き継いでみました。
ファイルを変更してbuildを実行、bundle.jsが更新されたら自動でブラウザリロードという流れです。
もっと良いやり方があると思いますが、このような感じで書いてみました。
こうすることで、↑の例であれば、src以下のソースはES6の構文を使って書き、
読み込むのはES5に変換されたbundle.jsということが可能です。
実際にはIE8への対応などで、これだけで解決というわけにはいかないと思いますが、
今後のためにも、ES6構文を試し、少しずつ学んでおくと良いと思います。
