はじめに
ググると上の方に出てくる Phoenix Framework (Elixir)で React.jsを動かしてみる - Misoca開発ブログ には
Phoenixでは、brunchを使って、静的なアセットをビルドしています。brunchでは、JavaScriptライブラリなどをbowerを使って管理します。
とあるが、bowerは使いたくない。
brunch/react-brunch - JavaScriptを使えばいいのかなと思ったら、
DEPRECATED: Please use babel-brunch instead.
とある。babel-brunchは最初から入ってる。どうもreact-brunchはjsxのコンパイルしてくれるだけで、babelにその機能入ってるらしい。
※ 参考：JavaScript - Babel に JSX は要らない - Qiita
色々調べた結果、npmでインストールして、それを使うように設定したらできた。
手順
インストール
npm install --save react react-dom babel-preset-es2015 babel-preset-react
React v0.14でCoreモジュールとDOM関連のものが分離されたらしい。今回はWebアプリをつくるのでreact-domもインストールした。
※ 参考：React.js v0.14 changes - blog.koba04.com
ホワイトリスト追加
npm: {
enabled: true,
// Whitelist the npm deps to be pulled in as front-end assets.
// All other deps in package.json will be excluded from the bundle.
// JSからimportするものはwhitelistに追加する？？
whitelist: ["phoenix", "phoenix_html", "react", "react-dom"]
}
これがないと、import React from "react" でエラーになった。
presets追加
plugins: {
babel: {
presets: ["es2015", "react"], //es2015はbrunchのdefaultだけど、わかりづらいので明示的に指定しておく
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/]
}
},
babel6からは自分でどの言語を使うのか指定しないといけないらしい。
babel6での変更点 Gulp・Webpackの設定 - Qiita
brunchはdefaultでes2015を使ってくれるらしいけど、reactだけを指定したらエラーがでたので両方指定してる。
サーバー再起動
mix phoenix.server
おわりに
ホワイトリストとかはいまいちまだよくわかってない。。。
JS界隈、いつのまにかけっこう変わってたり、ライブラリ／フレームワークが多すぎてつらい。