Posted at

ECMAScript6を書きたい part2 (babel、gulp)

More than 3 years have passed since last update.


前回の話

http://qiita.com/YukiMiyatake/items/1e11e7b96528a0d1267d

babel-cliの環境を構築し、ECMAScript6のコードをトランスコンパイルする

まで。


今回すること

今のままだと、ファイルごとに babel でトランスパイルする必要があり

面倒なので

makefileのように、一発でトランスパイルさせたいと思います

その時に、依存関係を解決させる requireや

バックグラウンドでファイルが変更されたら自動的にトランスパイルする設定

を行おうと思います


gulp

gruntは少し古くさいという話があったので

gulpにします

まず package.jsonを作ります

$npm init

ここでアプリ名やバージョン、スタートアップファイル等を選びますが

結構適当で大丈夫です

gulp、gulp-babelのインストール

$npm install -g gulp-babel

$npm install --save-dev gulp

$npm install --save-dev gulp-babel

ファイル監視時にエラー発生時に停止しなくするプラグイン

$npm install --save-dev gulp-plumber

ソースマップを作成する

$npm install --save-dev gulp-sourcemaps

そして、自動ビルド用の設定ファイル gulpfile.js 作成


gulpfile.js

var gulp = require('gulp');

var babel = require('gulp-babel');
var plumber = require('gulp-plumber');
var sourcemaps = require("gulp-sourcemaps");
var src = ['test.js'];

gulp.task('build', function () {
return gulp.src(src)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest('./dist'));
});

gulp.task('watch', function () {
gulp.watch(src, ['build']);
});

gulp.task('default', ['build']);


var src= の配列に、変換元のファイルを入れます

.pipe(gulp.dest('./dist')); ここは 変換後のディレクトリ

$gulp build

で、ファイルを全部ビルドします

$gulp watch

をすると、ファイルに変更がはいると自動的にビルドしてくれます

とりあえず これが簡単なgulpの設定です


おまけ

babel-plugin-asm-js

を使えば、ECMAScript6+Flow で書いた 型付きのJavaScriptを

asm.jsに変換してくれると夢をみていたが

どうやら コミットも 現時点で 2015年7月でとまってるし

パッケージにもミスがあったり、issueが消化出来てなかったり

実用するには難しそうだ・・・

このプラグインを期待してbabel導入したのに・・・

asm.jsを手書きするか

結局 C++からemscriptenするしかないのか・・・