reactify→babelifyに設定変更した際のハマりどころ

ES6対応を視野に入れて、browserify + reactify + envify → browserify + babelify構成に変更した際のメモ。

当方、KarmaとESLintも導入しております。

結構色々ありました。

.babelrcを置く

一応。

{
  "stage": 0
}

package.jsonの書き換え

reactify → babelify

transformの設定をreactify→babelifyに書き換えます。

envifyの廃止

envifyの代替になるので、babelのutility.inlineEnvironmentVariablesを導入

結果

こんな感じに。

  "browserify": {
    "extension": [
      "jsx",
      "es6"
    ],
    "transform": [
      [
        "babelify",
        {
          "optional": [
            "utility.inlineEnvironmentVariables"
          ]
        }
      ]
    ]
  }

ESLint

.eslintrcを以下変更しています。

• babel-eslintの導入
• strictオプションをoffに

結果

こんな感じに。

---
  parser: babel-eslint

  rules:
    strict: 0

Karma

karma.conf.jsを変更しています。

browserifyの変更点

当方、power-assertを使っているのですが、espowerfyを指定しても動かず、結構ハマりました。

babel-plugin-espowerを指定して、ようやく動きました。

    browserify: {
      debug: true,
      files: [
        'test/**/*.js*'
      ],
      extensions: ['.js', '.jsx'],
      transform: [
        require('babelify').configure({
          plugins: ['babel-plugin-espower']
        })
      ]
    },

疲れた・・・