概要
React.jsの勉強している時にBabelというツールを皆さんが使っていてどんなツールか知らなかったのでまとめてみました。
環境
- Babel 6.5.2
Babelとは
BabelはES6やES7など、新しいJavaScriptの仕様で書かれたソースコードを現状のブラウザで使用できるように変換（トランスパイル）してくれるツールです。
例えばES6のアロー演算子など、まだ対応していないブラウザはもちろんあるためそういったものを今のブラウザで動くように変換してくれます。
presetとは
どの仕様で書いているかを選択するための項目です。現在は
- es2015
- stage-0 ~ stage-3
- react
などがありますが、例えばreactのコードをES6の記法で書いたコードでしたら、reactとes2015を選択します。
stage-nとは
新しい仕様はstage-nとして書かれます。
stageは０〜４まであり、
| stage | 状態 |
|---|---|
| 0 | アイデア |
| 1 | プロポーザルの目的や解決方法を示す |
| 2 | いわゆるドラフト |
| 3 | 仕様は完成した状態 |
| 4 | ECMAScriptへ取り込まれる準備が完了 |
というステータスで、数字が大きくなるほど完成度が高まって次の仕様として策定されます。
presetでは以下のように動作します。
| preset | 範囲 |
|---|---|
| stage-0 | stage-0 〜 stage-3の全機能 |
| stage-1 | stage-1 〜 stage-3の全機能 |
と言った感じです。なので使いたい新仕様がどのstageか分からなければ、stage-0を選択すれば大丈夫です。
またes2016はES7に対応し、毎年更新でそのときstage-4のものがes201*に入ります。
stageは常に更新されてるので今ES7の仕様がstageに入っていても今後はES8とかの仕様になってきます。
動作確認
準備
$ npm install -g babel-cli
ES6用のpresetをインストールします。
$ npm install babel-preset-es2015
検証
以下にES6のclassを使ったファイルがあるとします。
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 |
