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

React大好きなんですがちょっと離れてると機能が増えてたり、変更があったりと追いつくのがなかなか大変です。
今年はAdvanced Configurationで廃止された設定、新しく追加された設定に絞って書いてみます。
一部、勉強のためにcreate-react-appの修正箇所も紹介します。

2019年末版はこちら

Advanced Configurationの公式ドキュメント

GitHubのドキュメント

create-react-app

設定方法

shellで設定する場合には

package.json

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

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

..env.development

CI=true

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

廃止されたAdvanced Configuration

NODE_PATH

react-scripts@4.0.0で廃止。
今後はjsconfig.jsonまたはtsconfig.jsonにbaseUrlを設定してねってこと。
もともと、baseUrlを設定してない場合には、NODE_PATHを使うようになってたのでやっとなくなったのかという設定。

EXTEND_ESLINT

これも同じくreact-scripts@4.0.0で廃止。
この設定がなくても拡張できるようになったとのこと。

修正PR

追加されたAdvanced Configuration

WDS_SOCKET_HOST

WDSはwebpack-dev-serverから。
Hot Module Replacement用にカスタムのwebsocketホスト名で開発サーバーを実行。
webpack-dev-serverのデフォルトはwindow.location.hostnameで、SockJSのホスト名を指定します。
この変数を使用して、一度に複数のプロジェクトでローカル開発を行える。

WDS_SOCKET_PATH

webpack-dev-serverのデフォルトは、SockJSパス名の/sockjs-node。
この変数を使用して、一度に複数のプロジェクトでローカル開発を行える。

WDS_SOCKET_PORT

webpack-dev-server のデフォルトは、SockJS ポートの window.location.port です。
この変数を使用して、一度に複数のプロジェクトでローカル開発を開始を行える。

FAST_REFRESH

Fast Refreshという実験段階の機能。
アプリ全体をリロードするわけではなく、修正したコンポーネントのみを更新することにより高速開発が可能になる。
問題があったらfalseに設定してオフにしましょう。

DISABLE_NEW_JSX_TRANSFORM

React 17 で導入され、React 16.14.0、15.7.0、0.14.10 にバックポートされたNEW JSX TRANSFORMを無効にします。
古いReactプロジェクトでReactをバージョンアップできなく問題になる場合に使用する。

NEW JSX TRANSFORMについて

まとめ

どうでしたか？
設定の廃止、追加をみるだけでも今年1年のReactの変化が見れて面白いですね！

今年追加された設定は、自分の開発ではあまり使う機会はないかも。
廃止された設定は使っていたのでそっと削除しておこうと思います。

来年もReactはどのように変化していくのか楽しみですね！