この記事には新しいURLが設定されています

What is create-react-app

GitHub - facebookincubator/create-react-app

Create React apps with no build configuration.

イマドキのJS開発環境でWebアプリを作ろうと思ったらビルド環境が必要ですが、それも含めて、Reactを使った開発環境の構築をしてくれるのがこのcreate-react-appです。create-react-appの依存関係に含まれるreact-scriptsというモジュールがビルド周りを担っています。

How to use

セットアップ

$ npm i -g create-react-app         # create-react-appのインストール

$ create-react-app <project_name>   # 任意の名前のReactApplicationを作成してくれる

$ npm start                         # ビルド&ローカルサーバ起動(npmを利用する場合)
$ yarn start                        # 同上(yarnを利用する場合)

ビルド

$ npm run build    # npmを利用する場合
$ yarn run build   # yarnを利用する場合

How do feel

コンセプトの通り簡単にReact Applicationの土台を用意することができるので、これからReactを実用として試したいという場面でとても役立ちました。フォルダ構成やビルドについても用意されているものに従うだけなので悩む必要がなく、Reactのキャッチアップやfluxライブラリの検証にも使えました。

そのお手軽さの反面、どうしても融通がききにくい部分がありました。特にビルド周りがガチガチに作り込まれていてカスタマイズできずに苦労したのはいい思い出…じゃない(´・ω・｀)

ビルド成果物に強制的にタグ番号が振られて困る

npm startを叩くと、手元でお手軽にローカルサーバを起動し動作確認することができます。ちょっとの確認ならこれでいいのですが、複数人で開発している場合は開発環境用のサーバに適用(bundleされたjsを配信する等)して動作確認する場面もあるでしょう。

で、いざバンドル用のコマンドnpm run buildを叩いてみると、bundle.3969bbc2.jsといった具合にタグ番号が振られます。これが迷惑。HTML側でいちいち<script>タグを修正しないといけません。

リリースするjsファイルはそれでいいけど、開発環境に適用するjsファイルにはそんなのいらんのよ…(´・ω・｀)

ビルド結果が手元での実行時とCIでの実行時で違って困る

CircleCIにnpm run buildさせたところ、たくさんのWarningと「Failed to compile」の文字が。手元で同コマンドを叩いても何も起きなかったくせに！！

Create React App treats warnings as failures in the build.

CIでビルドさせるときはワーニングでもビルド失敗として扱うようです。

if (process.env.CI && stats.compilation.warnings.length) {
     printErrors('Failed to compile.', stats.compilation.warnings);
     process.exit(1);
   }

react-scriptsのソースにもこの通り。

ここまでは親切でありがたいのだけれど、せめて手元でビルドしたときに同じWarningを表示しよう。なぜ手元ではWarning出してくれないんだ…(´・ω・｀)

つまりビルドの中身を簡単に変えられない

ここまでで何となく伝わるかと思いますが、react-scriptsモジュールにはカスタマイズの余地があまりありません。内部的にWebpackを使っているのですが、webpack.config.jsを外から上書く機構などがなく、process.envに変数を追加してビルド時にゴニョゴニョしたい…みたいなことがサッとできずに少し困りました。
(この話： JavaScriptでデプロイ環境ごとに設定ファイルを読み込む方法)

まとめ

Reactを使ったWebApplicationをさっと立ち上げるには便利ですが、ビルド周りの融通がききにくい、ということに尽きます。

とは言え、工夫すればいい感じにビルドすることはできるし、そこでゴニョゴニョ工夫するくらいならイチからwebpack.config.js書くなりして自前の環境を用意すればいいし、どうとでもなります。

こういうのはとっつきやすくて手っ取り早いのがいいところだと思うのであります。以上。