【React】ejectせずに設定ファイルを変更する【react-app-rewired】

react-app-rewiredを使ってcreate-react-appで作ったプロジェクトの設定をejectせずに編集したい！

概要

今回の記事では、react-app-rewiredを使ってcreate-react-appで作ったプロジェクトの設定をejectせずに編集する手順を掲載する。

仕様書

環境

node v21.1.0
npm 10.8.1
create-react-app 5.0.1
react-app-rewired 2.2.1

手順書

インストール編と設定編の2部構成です。

インストール編

プロジェクトにreact-app-rewiredをインストールする。

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

設定編

プロジェクトのディレクトリーのトップにconfig-overrides.jsを作る。今回は例としてビルドの出力先を変更してみる。

const path = require('path');
const fs = require('fs');
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

module.exports = {
    paths: function (paths, env) {
        paths.appBuild = resolveApp('/output/app');
        return paths;
    },
};

package.jsonのscriptsのreact-scriptsをreact-app-rewiredに置き換える。

...
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    ...
  },
...

前のバージョンではTypeScriptを採用したプロジェクトの場合、引数でオプションを設定する必要があったんだけども、今のバージョンではオプションが不要になった。

まとめ（感想文）

任意の設定を変更するのが大変そう。