babel6の件
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のツイート
babelifyいろいろ変わってるみたい > choking on jsx syntax · Issue #126 · babel/babelify https://t.co/ag3vzTCgIN
— kinjouj (@kinjou__j) 2015, 10月 31
babelifyならreactのJSXも処理してくれてたけど今はそういうのもプラグイン化みたいなのされてる模様
— kinjouj (@kinjou__j) 2015, 10月 31
だから単純にbabelifyを入れてbrowserifyで-tでtransformerを指定してもビルド出来ない
— kinjouj (@kinjou__j) 2015, 10月 31
つい最近の話なんだろか > 6.0.0 Released · Babel https://t.co/Asi0C0JQ8S
— kinjouj (@kinjou__j) 2015, 10月 31
あくまでBabelのバージョンが6.0.xな話であってbabelifyのバージョンが6.0.0の事ではない模様
— kinjouj (@kinjou__j) 2015, 10月 31