Gulp + Babel で ES6 を書く環境を作る

こんにちは、広幡です。

現在携わっているプロジェクトで、フロントエンドはES6で記述しています。

ES6を触るのは初めてで、勉強せな・・と感じたので、

学習用に Gulp + Babel の環境を作ってみました。

これが結構便利だったので、今回はその環境の作り方をご紹介します。

下記のES6で記述したJavaScriptが、その下のES5に変換されるようになればいいですね。

// これが...
const add1 = i => i + 1
const multi = (n, m) => i * j

// こうっ！
var add1 = function add1(i) {
  return i + 1;
};
var multi = function multi(n, m) {
  return i * j;
};

ちなみに私が使用しているNode.jsのバージョンはv5.0.0です。参考まで。

Gulp + Babel の環境を作る

Gulp のインストール

まずは以下のコマンドでGulpをインストールします。

npm install --save-dev gulp gulp-load-plugins

ちなみに以下を bash_profile または bashrc に記述すると便利です。

export PATH=./node_modules/.bin:$PATH

これにより、npm install --save-dev したものをプロジェクトルートから読み込めるようになります。

gulp-load-plugins はGulpプラグインを一括でロードできるようになるものです。かなり便利。

※ Gulpのバージョンは3.9.0以上にしないと、タスクをES6で記述できないみたいです。

qiita.com

Babel のインストール

次はBabelをインストールします。

npm i -D babel babel-core babel-preset-es2015 gulp-babel

そして、プロジェクトルート直下に .babelrc ファイルを作成し、下記を記述します。

{
  "presets": ["es2015"]
}

これにより、ES6で書かれたものをコンパイルできるようになります。

タスクの作成

次にES6で書いたJavaScriptを、ES5に変換するタスクを作成します。

gulpfile.js ではなく gulpfile.babel.js の名前でプロジェクトルート直下に作成してください。

名前を変えることにより、GulpのタスクをES6で記述できるようになります。

import gulp from 'gulp'
import gulpLoadPlugins from 'gulp-load-plugins'

const $ = gulpLoadPlugins()

gulp.task('script', () =>
  gulp.src('src/scripts/**/*.js')
    .pipe($.babel())
    .pipe(gulp.dest('dist/scripts'))
)

実行

最後に、ES6で書かれたJavaScriptを src/scripts/ 配下に用意します。

const add1 = i => i + 1
const multi = (n, m) => i * j

そして下記のコマンドで実行します。

$ gulp script
[16:37:48] Requiring external module babel-core/register
[16:37:51] Using gulpfile ~/Work/blog2/gulpfile.babel.js
[16:37:51] Starting 'script'...
[16:37:52] Finished 'script' after 135 ms

（ ＾ω＾）おっ

変換されたファイルを見てみましょう。

"use strict";

var add1 = function add1(i) {
  return i + 1;
};
var multi = function multi(n, m) {
  return i * j;
};

（ ＾ω＾）おっ

ちゃんとES5に変換されてますね。

以上で、Gulp + Babel で ES6 を書く環境を作ることができました。

おわりに

この環境があれば、何かを使ったり試してみる際に便利だったのでご紹介しました。

本当はBrowserifyの紹介もしたかったんですが、

Browserifyを完全に理解できていないので、ここでは割愛します。

それではまた。