DeNAさんの「Babelで先取り次期JavaScriptの仕様(ES6)を体験してみよう!」へお邪魔してきました。
解説の方がMacで、孤高のThinkPadder(私)はてんやわんやでした 笑
Windows環境についてネットに転がってなかったのでメモメモ
1.node.jsをインストール
https://nodejs.org/en/
node.js現在の最新版「v5.7.0 Stable」をインストールしました。
インストールするとコマンドラインでnpmが使えるようになります。
> npm -v
3.6.0
2.Babelをインストール
npmでBabelをインストールします。
-gはグローバルオプションで、どのディレクトリでもBabelが使えるようになります
> npm install -g babel-cli
Babelコマンドが使えるようになります
> babel --version
6.5.1 (babel-core 6.5.2)
バベられなかった
Babelを試すために作ったディレクトリに、ES6のJavaScriptをつくります。
class User {
constructor(name) {
this._name = name;
}
say() {
return 'My name is ' + this._name;
}
}
babelコマンドで対象のスクリプトを指定すると、ES5に変換後のソースが表示されます。
> babel script.js
class User {
constructor(name) {
this._name = name;
}
say() {
return 'My name is ' + this._name;
}
}
( ・3・)アルェー 変わってないよー
3.BabelのES2015プリセットをインストール
Babelを試す用のディレクトリへ移動し、プリセットをインストールします。
> cd /d D:\DevTool\Babel
>
> npm install babel-preset-es2015 --save-dev
4.プリセットの設定ファイルをつくる
Babelを使う時のプリセット設定ファイル(.babelrc)をつくります。
.babelrc は拡張子のみのファイル名なので、コマンドラインで出力します
> echo {"presets" : ["es2015"]} > .babelrc
5.バベられた!!(成功)
神に許された!
ES6のコードがES5で動くように変換されました!
> babel script.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 User = function () {
function User(name) {
_classCallCheck(this, User);
this._name = name;
}
_createClass(User, [{
key: 'say',
value: function say() {
return 'My name is ' + this._name;
}
}]);
return User;
}();
-oオプションで出力ファイルを指定したり
> babel script.js -o script-es5.js
-wオプションで元ファイルが変更されるたびに再出力したりできます
> babel script.js -w -o script-es5.js