timarney/react-app-rewired

これは何？

主な機能

• 01config-overrides.jsの関数を通じて、デフォルトのCRA webpack設定を拡張する。
• 02テスト用のBabel設定を含め、Jest設定をカスタマイズする。
• 03HTTPS証明書など、webpack開発サーバーの設定を上書きする。
• 04コマンドラインオプションでカスタムreact-scriptsパッケージをサポートする。
• 05config-overridesディレクトリまたは任意のファイルパスを指定して利用できる。

ユースケース

• ejectせずに、Create React Appプロジェクトへカスタムwebpackプラグインやローダーを追加する。
• CRA開発サーバーのHTTPS証明書を設定する。
• CRAアプリのJest設定やテスト用Babelプラグインを調整する。

クイックスタート

1. 1

   react-app-rewired を開発用依存関係としてインストールする

   npm install react-app-rewired --save-dev
2. 2

   プロジェクトのルートに config-overrides.js を作成し、override 関数をエクスポートする

3. 3

   npm の start、build、test スクリプトで react-scripts の代わりに react-app-rewired を使うよう変更する

4. 4

   開発サーバーを起動する

   npm start

使う前に知っておきたいこと

• !このプロジェクトは主にコミュニティによって限定的にメンテナンスされており、サポートは提供されていません。
• !Create React App 2.x と Webpack 4 向けに設計されています。古い CRA バージョンでは、バージョンを 1.6.2 に固定したリリースが必要です。
• !設定をカスタマイズすると、その管理責任を負うことになり、CRA の保証が損なわれる可能性があります。

トピック

よくある質問

react-app-rewired とは？

ejectせずにCreate React Appのwebpack、Jest、開発サーバーの設定をカスタマイズできるconfig-overridesヘルパー。 react-app-rewiredを使うと、ejectを実行したりreact-scriptsをフォークしたりせずに、Create React Appプロジェクトのwebpack設定を変更できます。プロジェクトのルートに、デフォルトのwebpack設定を受け取る関数をエクスポートするconfig-overrides.jsファイルを置き、変更した設定を返します。プラグインやローダーなどのビルド設定も、このファイルを編集するだけで追加できます。

react-app-rewired は無料で使えますか？ライセンスは？

react-app-rewired は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

react-app-rewired は今もメンテナンスされていますか？

半年以内に更新あり。react-app-rewired の最終コミットは 2026年10月3日 です。

react-app-rewired は何に使えますか？

ejectせずに、Create React Appプロジェクトへカスタムwebpackプラグインやローダーを追加する。 CRA開発サーバーのHTTPS証明書を設定する。 CRAアプリのJest設定やテスト用Babelプラグインを調整する。

react-app-rewired のインストール方法は？

react-app-rewired を開発用依存関係としてインストールする: npm install react-app-rewired --save-dev プロジェクトのルートに config-overrides.js を作成し、override 関数をエクスポートする npm の start、build、test スクリプトで react-scripts の代わりに react-app-rewired を使うよう変更する 開発サーバーを起動する: npm start

react-app-rewired はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/timarney/react-app-rewired