create-react-app Advanced Configuration まとめ 2019年末版

VISITS Technologies Advent Calendar 2019 5日目は @overgoro56 が担当します。

create-react-appはejectすればカスタマイズ可能ですがしなくても設定でいろいろできます。
詳細な情報は公式ドキュメントを見れば書いてあるので、ここでは簡単な使い方を紹介します。
一部、勉強のためにcreate-react-appのソースも紹介します。

Advanced Configurationの公式ドキュメント

GitHubのドキュメント

create-react-appページ

設定方法

shellで設定する場合には

package.json

  "scripts": {
    "start": "CI=true react-scripts start",

のようにするか、.envファイルで

.env.development

CI=true

のように環境ごとに設定します。

Advanced Configuration

BROWSER

ブラウザを指定することにより react-scripts start した時に開くブラウザを指定できます。

package.json の scripts に start:safari のように用意して、普段はchromeで実行するけど、ブラウザ検証のためSafariで実行したい場合に用意しておくとか。

設定例.

BROWSER=/Applications/Safari.app/Contents/MacOS/Safari

BROWSER_ARGS

BROWSER を設定しているときに渡す引数を設定。

HOST

デフォルトだとdevice上の全てのhostnamesでアクセス可能にするが明示的に指定も可能。

社内の安全なネットワーク以外の環境で開発する場合にHOST=localhostを設定してネットワーク上に公開しないようにしたり。
カフェや外のワーキングスペースで仕事する場合には重要な設定。

PORT

ポートを指定可能。
複数アプリケーションを同時に起動して開発する時に指定したり。

HTTPS

ネットワークに公開する時にHTTPSにしたい時。

PUBLIC_URL

アセットの参照先URLを変えたい時など。

CI

ビルド中の警告をエラーとして扱う。
CIで使うための設定。

REACT_EDITOR

エラーが発生した場合、ブラウザ上のエラーリンクから指定したエディタにジャンプできる。
例えばVisual Studio Codeで開きたい場合には、shellでcodeでVisual Studio Codeを起動できるように設定した上でREACT_EDITOR=codeと設定しておく。

CHOKIDAR_USEPOLLING

VM上で動作させる時にソースの変更を検出してくれない時に設定。

GENERATE_SOURCEMAP

本番環境でユーザーにソースを見られないようにmapファイル生成したくない時に使用。

NODE_PATH

absolute pathでimportする時に使用していた。
最近はjsconfig.jsonまたはtsconfig.jsonにbaseUrlを設定することで対応が可能。
baseUrlを設定してない場合には、NODE_PATHを使うようになってるっぽい。

以下のソースで確認できる。

create-react-appのソース

INLINE_RUNTIME_CHUNK

デフォルトだとindex.htmlにruntime scriptがインラインで埋め込まれる。
CSPを厳格に行う場合にはこの設定をfalseにすることにより他のスクリプト同様インポートする。

IMAGE_INLINE_SIZE_LIMIT

デフォルト値は10KB。
この値よりも小さいサイズの画像をビルド時にbase64に変換してインラインで埋め込むことにより画像取得のリクエストを削減。
0を設定すると無効化。

ビルド後の結果を比較すると挙動がわかりやすいので確認してみるといい。

EXTEND_ESLINT

デフォルトだとreact-scripts実行時は、.eslintignoreは使わない、baseConfigはeslint-config-react-appを使いますが、この設定をtrueにすると.eslintignore、.eslintrcを参照するように設定できます。
最近追加された設定です。

追加後に修正・改善が行われているので使う場合にはreact-scriptsのバージョンを3.2.0以降にするのが良さそう。

やってることは以下のソースで確認できる。

create-react-appのソース

参考：eslintの設定

TSC_COMPILE_ON_ERROR

TypeScriptエラーが発生していてもコンパイルできるようにする。
プロトタイプの時はいいかもしれないが、製品開発では使わない方がよいと思う。

まとめ

自分が使っている設定はHOST、PORT、CI、REACT_EDITOR、GENERATE_SOURCEMAP、EXTEND_ESLINTです。
他は必要が出た時に導入予定です。

いろいろ設定がありますが、その目的を確認したりソースを実際に見てどんなことしてるか理解すると安心して使えると思います。
使ってない設定で便利そうだなと思ったものがあれば是非導入してみてください。

また、create-react-appのソースを見るとejectすると消されてしまうソースもあることもわかるので直接ソースを見た方が勉強になります。
ここまで確認できれば、あとは必要な設定をcreate-react-appに対してPR出してコミッターの仲間入りもできそうですね！