react-app-rewired

react-app-rewiredは、Create React App（CRA）プロジェクトのwebpack設定を、'eject'コマンドを使わずに上書き・カスタマイズできる開発者向けツールです。CRAのゼロ設定の利点を維持しながら、開発者がプラグインやローダー、その他の必要なカスタマイズを追加できる柔軟性を提供します。 このツールは、標準のreact-scriptsコマンド（start、build、test）をインターセプトし、config-overrides.jsファイルからユーザー定義のオーバーライドを適用することで動作します。このファイルは、webpackカスタマイズ用の単一関数、またはwebpack、Jest、devServer、paths設定用の個別関数を持つオブジェクトのいずれかをエクスポートできます。 主な機能には、開発・本番ビルド用のwebpackルールとプラグインのカスタマイズ、テストパスパターンやBabelプリセットを含むJestテスト設定の変更、HTTPS証明書やプロキシ設定用のWebpack Dev Server設定の上書き、webpackとJestに渡されるプロジェクトパスの調整が含まれます。 このプロジェクトは、CRA 1.x（Webpack 3）とCRA 2.x（Webpack 4）の両方をサポートしており、バージョン2.0ではrewireヘルパー関数を廃止し、直接設定に置き換えました。また、--scripts-versionフラグを介してカスタムreact-scriptsパッケージもサポートし、react-scripts-tsなどのTypeScriptバリアントでの使用を可能にします。 一般的なユースケース向けのrewireプラグインの大規模なコミュニティエコシステムが存在し、Babelプラグイン（emotion、lodash、styled-components）、webpackプラグイン（favicons、imagemin、bundle analyzer）、ローダー（TypeScript、SCSS、SVG、YAML）などが含まれます。config-overridesファイルは、モジュール化された構成用にディレクトリとして指定したり、柔軟性のためにコマンドラインで渡したりすることもできます。 重要な注意点：react-app-rewiredを使用するとCRAの公式保証が失われ、設定を自己責任で管理し、公式サポートは受けられません。著者は、広範なカスタムwebpack設定を最初から必要とするプロジェクトにはNext.jsまたはRazzleを推奨しています。customize-cra、Rescripts、cracoなどの代替ツールもCRA 2.0+互換で利用可能です。