Carpe Diem

備忘録

Babel6でトランスパイル

概要

React.jsの勉強している時にBabelというツールを皆さんが使っていてどんなツールか知らなかったのでまとめてみました。

環境

  • Babel 6.5.2

Babelとは

BabelはES6ES7など、新しいJavaScriptの仕様で書かれたソースコードを現状のブラウザで使用できるように変換(トランスパイル)してくれるツールです。
例えばES6のアロー演算子など、まだ対応していないブラウザはもちろんあるためそういったものを今のブラウザで動くように変換してくれます。

presetとは

どの仕様で書いているかを選択するための項目です。現在は

  • es2015
  • stage-0 ~ stage-3
  • react

などがありますが、例えばreactのコードをES6の記法で書いたコードでしたら、reactes2015を選択します。

stage-nとは

新しい仕様はstage-nとして書かれます。

stageは0〜4まであり、

stage 状態
0 イデア
1 プロポーザルの目的や解決方法を示す
2 いわゆるドラフト
3 仕様は完成した状態
4 ECMAScriptへ取り込まれる準備が完了

というステータスで、数字が大きくなるほど完成度が高まって次の仕様として策定されます。

presetでは以下のように動作します。

preset 範囲
stage-0 stage-0 〜 stage-3の全機能
stage-1 stage-1 〜 stage-3の全機能

と言った感じです。なので使いたい新仕様がどのstageか分からなければ、stage-0を選択すれば大丈夫です。

またes2016ES7に対応し、毎年更新でそのときstage-4のものがes201*に入ります。
stageは常に更新されてるので今ES7の仕様がstageに入っていても今後はES8とかの仕様になってきます。

動作確認

準備

CLIツールをインストールします。

$ npm install -g babel-cli

ES6用のpresetをインストールします。

$ npm install babel-preset-es2015

検証

以下にES6classを使ったファイルがあるとします。

class Human {
    constructor(name) {
        this.name = name;
    }

    say() {
        console.log("I'm " + this.name);
    }
}

var h = new Human("Mike");
h.say();

変換します。

$ babel --presets es2015 src.js -o out.js

中身を見てみます。

$ cat out.js 
"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Human = function () {
    function Human(name) {
        _classCallCheck(this, Human);

        this.name = name;
    }

    _createClass(Human, [{
        key: "say",
        value: function say() {
            console.log("I'm " + this.name);
        }
    }]);

    return Human;
}();

var h = new Human("Mike");
h.say();

以前の書き方で書かれています。

nodeで実行してみます。

$ node out.js 
I'm Mike

問題なく実行できました。

Babelと他のツールの組み合わせ

gulpやgrunt、webpackなどでbabelを使う場合はライブラリがあるのでそちらを利用します。
それぞれ別のライブラリになるため、以下に対応表を載せます。

ツール ライブラリ
Browserify babelify
gulp gulp-babel
Grunt grunt-babel
webpack babel-loader

ソース