gulpでbabelを導入する
まだブラウザだったりnodeで対応していない箇所もあるけど、
そろそろES6の勉強もしないとなぁということで、手っ取り早くgulpにbabelを導入することにしました。
インストール
npm install --save-dev gulp-babel babel-preset-es2015
babelのバージョンが上がったため、
gulp-babelだけだと es6→es5 に変換してくれない。
変換用のプリセットが必要です。
ここに色々まとめてあります。
React.js用のプリセットもあるようですね。
babeljs.io
gulpfile.jsはこんな感じ
const gulp = require('gulp'); const webserver = require('gulp-webserver'); const babel = require('gulp-babel'); const rename = require('gulp-rename'); const plumber = require('gulp-plumber'); gulp.task('webserver',function(){ // ローカルサーバー立ち上げ gulp.src('./') .pipe(webserver({ host: '0.0.0.0', port: 8888, livereload: true })); }) gulp.task('babel',function(){ gulp.src('./*_es6.js') .pipe(plumber()) .pipe(babel( { presets: ['es2015']} // ここでプリセットを指定する )) .pipe(rename(function(path){ var len = path.basename.length - 4; path.basename = path.basename.slice(0, len); // renameモジュールを使って、hogehoge_es6.js(es6ファイル)を // distフォルダ内に hogehoge.js(es5ファイル)に変換&リネームして格納する })) .pipe(gulp.dest('dest')) }); gulp.task('babel_watch', function(){ gulp.watch('./*_es6.js', ['babel']) // ファイル監視 });
これを走らせてみる。
index_es6.js(変換前)
'use strict'; // 関数 var fn = () =>{ console.log("hoge"); } // 分割代入と入れ替え var [a,b] = [22,"#"]; [a,b] = [b,a];
index.js(変換後)
'use strict'; // 関数 var fn = function fn() { console.log("hoge"); }; // 分割代入と入れ替え var a = 22; var b = "#"; var _ref = [b, a]; a = _ref[0]; b = _ref[1]; _ref;
babelがすべてのES6に対応しているわけではないので、調べながら
使ってみようと思う。