Day.2 BABELがバージョン6系になって盛大にはまった件

もはやAdventCalendarやってませんね。。。
11月後半から鬱状態で休日は用事がない時はずっと家で寝ていました。

そんな時に、業務中に面白そうなアプリ案を思いついて
electron + React + (Redux ?) で実装してみようと思い

何も考えず、npm initでプロジェクト作成。
JavaScriptなのだからes6を使いたいのでbabel、gulpを追加

ここまでは問題なくいつもどおりだった。。。

そして問題は起こった

• babelのバージョンが6系だった

JavaScriptをes6で書いていって、gulpでタスク追加して
いざテストとして、タスク実行している時に事件は起きた。

es6で書いたJavaScriptがコンパイルされない！！

訳が分からずテストコードを書いてみて、CLIからコンパイルしてみるが
結果は変わらず。。。

$ babel test.js
class Person {
    constructor() {
        this.name = "arukmn";
    }
}

const obj = (() => {
    return {
        log() {
            alert('Hello Babel!');
        }
    };
})();

やっぱりわけがわからない私は相談してみることに。

解決編

調べてみるとbabelのバージョン6について下記のようなことが判明した。

• 全体的に色々と修正が加えられていること
• Reactなどを使用する際はpresetsを指定しなければならない
• presetsはbabelとは別にインストールする必要がある
• presetsは.babelrcという設定ファイルに記述しなければならない

ということで、上記の変更点を反映させました。

1. 必要なpresetsをnpm i -S
2. package.jsonと同一階層に.babelrcを作成
3. presetsの設定を記述

私は今回、下記のpresetsをインストールしました。

Presets	Package
es2015	babel-preset-es2015
stage-0	babel-preset-stage-0
React	babel-preset-react

全ての工程が完了後、再度テストをかけると正常にコンパイルされました。

$ babel src/test.js

"use strict";

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

var Person = function Person() {
 _classCallCheck(this, Person);

 this.name = "arukmn";
};

var obj = (function () {
 return {
   log: function method() {
     alert('Hello Babel!');
   }
 };
})();

さいご

技術的情報は逐次チェックする事、分かっていたことですが
今あるものがずっと続く訳がない事を再確認しました。

最近はJavaScriptを書けていなかったこともあり
いつもes5を使っていたことも仇になってしまったかもしれません。

さいごに、

コンパイル遅せぇぇ

なんで？なんで？

• [✔] コンパイルがクソ遅い原因が何なのか調査してみる

babeljs.io