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

[VISITS Technologies Advent Calendar 2019](https://qiita.com/advent-calendar/2019/visits) 5日目は @overgoro56 が担当します。

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

### Advanced Configurationの公式ドキュメント

[GitHubのドキュメント](https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/advanced-configuration.md)

[create-react-appページ](https://create-react-app.dev/docs/advanced-configuration/)

### 設定方法

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のソース](https://github.com/facebook/create-react-app/blob/889df8e65b105650fdedb21cb92635fabd40e3b6/packages/react-scripts/config/modules.js#L27)

### 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のソース](https://github.com/facebook/create-react-app/blob/58b4738a490f9643f540e9fdb74431c4d73e3ad7/packages/react-scripts/config/webpack.config.js#L354)

[参考：eslintの設定](https://github.com/eslint/eslint/blob/master/lib/cli-engine/cli-engine.js)

### TSC_COMPILE_ON_ERROR

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

## まとめ

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

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

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