Windows環境でバベられなかった

DeNAさんの「Babelで先取り次期JavaScriptの仕様（ES6）を体験してみよう！」へお邪魔してきました。
解説の方がMacで、孤高のThinkPadder(私)はてんやわんやでした 笑
Windows環境についてネットに転がってなかったのでメモメモ

１．node.jsをインストール

https://nodejs.org/en/
node.js現在の最新版「v5.7.0 Stable」をインストールしました。
インストールするとコマンドラインでnpmが使えるようになります。

cmd.exe

> npm -v
3.6.0

２．Babelをインストール

npmでBabelをインストールします。
-gはグローバルオプションで、どのディレクトリでもBabelが使えるようになります

cmd.exe

> npm install -g babel-cli

インストールが完了するとこんな画面

Babelコマンドが使えるようになります

cmd.exe

> babel --version
6.5.1 (babel-core 6.5.2)

バベられなかった

Babelを試すために作ったディレクトリに、ES6のJavaScriptをつくります。

script.js

class User {
  constructor(name) {
    this._name = name;
  }

  say() {
    return 'My name is ' + this._name;
  }
}

babelコマンドで対象のスクリプトを指定すると、ES5に変換後のソースが表示されます。

cmd.exe

> babel script.js
class User {
  constructor(name) {
    this._name = name;
  }

  say() {
    return 'My name is ' + this._name;
  }
}

( ･3･)ｱﾙｪｰ 変わってないよー

３．BabelのES2015プリセットをインストール

Babelを試す用のディレクトリへ移動し、プリセットをインストールします。

cmd.exe

> cd /d D:\DevTool\Babel
>
> npm install babel-preset-es2015 --save-dev

４．プリセットの設定ファイルをつくる

Babelを使う時のプリセット設定ファイル(.babelrc)をつくります。
.babelrc は拡張子のみのファイル名なので、コマンドラインで出力します

cmd.exe

> echo {"presets" : ["es2015"]} > .babelrc

５．バベられた！！（成功）

神に許された！
ES6のコードがES5で動くように変換されました！

cmd.exe

> 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オプションで出力ファイルを指定したり

cmd.exe

> babel script.js -o script-es5.js

-wオプションで元ファイルが変更されるたびに再出力したりできます

cmd.exe

> babel script.js -w -o script-es5.js