babel6の件

2015-11-01T13:49:50+09:00 JavaScript react.js

babel6からなにやら仕様が変わった模様で

import React from 'react';
import ReactDOM from 'react-dom';

class SampleComponent extends React.Component {
  render() {
    return (
      <h1>Sample</h1>
    );
  }
}

ReactDOM.render(<SampleComponent />, document.querySelector("#container"));

な漢字でES6でかつReact JSXを含むのをES5にトランスパイルする場合はbabelifyを入れれば良いだけだったが以下の方法を使わないと行けない(※あくまでどちらか)

.babelrcにpresetsを定義

{
  "presets": ["es2015", "react"]
}

babel-preset-[preset名]の依存性解決が必要になる(詳しくは以下のpackage.json)

package.jsonでbabelifyにpresetオプションを設定

{
  "name": "sample",
  "version": "1.0.0",
  "scripts": {
    "build": "browserify src/app.js -o bundle.js"
  },
  "dependencies": {
    "react": "^0.14.1",
    "react-dom": "^0.14.1"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.0.14",
    "babel-preset-react": "^6.0.14",
    "babelify": "^7.0.2"
  },
  "browserify": {
    "transform": [
      [
        "babelify", { "presets": ["es2015", "react"] }
      ]
    ]
  }
}

っていうように設定をしないと適切にES6からES5にトランスパイル出来なかったりReact JSXを含んでもトランスパイルに失敗する模様

余談

ハマった時のTwitterのツイート

reduxを使うReact Componentのテスト Robolectric3でDrawerLayoutをテスト