PHPStorm(WebStorm)でES6をBabelでコンパイル

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター! を買ったので PhpStormでECMAScript6をコンパイルしようとしたら少しハマったので その方法を記述いたします。

実行環境は以下の通りとなっており nodjsとnpmはすでにインストール済みの想定です - MAC OS X Yosemite
- node v5.3.0
- npm v3.3.12

Babelをインストール

Babel本体はnpmからインストールするのでターミナルにて以下コマンドを実行

npm install -g babel-cli

ECMAScript6対応プリセットをインストール

Babel 本体だけではES6はコンパイルできないのでES6対応プリセットを 別途インストールする必要があるのでターミナルにて以下コマンドを実行

npm install --save-dev babel-preset-es2015

ES6コンパイル環境の作成

Babel に対応プリセットを設定するため PhpStormにてプロジェクトを作成しプロジェクトディレクトリのルートに .babelrc を作成し以下内容を記述

{
"presets": ["es2015"]
}

ES6コンパイルの設定

common.es6(ファイル名は適当)を作成すると File wather 'Babel' is ~~ と表示されるので、「Add Watcher」をクリック

f:id:ultrasevenstar:20160104231553j:plain

New Watcher ダイアログが表示されるので Watcher Settings File type ECMAScript 6 に変更し「OK」を押下

f:id:ultrasevenstar:20160104231607j:plain

f:id:ultrasevenstar:20160104231617j:plain

ES6コンパイル

common.es6に以下を記述しコンパイルされているか確認

class hoge{
    hogeMethod(){
       let hogeFunction = () => alert('test')
    }
}

上記ファイルの下にcommon-compeled.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 hoge = (function () {
    function hoge() {
        _classCallCheck(this, hoge);
    }

    _createClass(hoge, [{
        key: 'hogeMethod',
        value: function hogeMethod() {
            var hogeFunction = function hogeFunction() {
                return alert('test');
            };
        }
    }]);

    return hoge;
})();

//# sourceMappingURL=test-compiled.js.map

これでES6の実行環境は完成です。 PhpStormがあればリアルタイムで、コンパイルしてくれるので良いですね。

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!