Create React Appのwebpack環境をejectしないでカスタマイズする方法

Create React App の webpack 環境を eject することで隠蔽された構成ファイルが、プロジェクトフォルダに顕現する。それらファイルを直接参照できることによって webpack や babel、ESLint など、カスタマイズを可能にしている。

ところが、複雑な構成ファイルを扱うにも抵抗があったり、eject すると元に戻せなかったりとネガティブな感情を覚えてしまう。

そこで、このエントリーでは、eject せずに Create React App をカスタマイズする方法を紹介したい。

カスタマイズの準備

eject せずに Create React App をカスタマイズするにも、多少の準備が必要だ。決して難しいことではないから引き続き付き合ってほしい。

パッケージをインストールする

webpack 環境をオーバーライドするのに必要なパッケージをインストールしたい。必要なパッケージは次の、

• react-app-rewired
• customize-cra

をインストールする。
ついては、以下コマンドを実行してほしい。

$ yarn add react-app-rewired customize-cra --dev
# or
$ npm install react-app-rewired customize-cra --save-dev

開発環境をカスタマイズするためのパッケージであるわけだから、いずれのコマンドも --dev や --save-dev オプションを付与することで、devDependencies 所属のパッケージとしてインストールしている。

package.json を修正する

package.json の scripts 項を修正する。

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

ここでは、eject コマンド以外の react-scripts を react-app-rewired にしているだけだ。

もともと react-scripts が隠蔽された構成ファイルを参照していたところに、react-app-rewired にすることでカスタム用構成ファイルを介入させる作りだと考えられる。

構成ファイルを用意する

まずはプロジェクトルートに config-overrides.js を新規作成しよう。とりあえず何も記述していない状態で構わない。

$ touch config-overrides.js

カスタマイズを実施

webpack 環境のカスタマイズにおいて依存関係にある react-app-rewired と customize-cra をインストールして、package.json を修正して、config-overrides.js を作成してきた。すでに eject せずにカスタマイズできる状態だ。

それではサンプルとして、babel 構成をカスタマイズして、import のパスに alias を設定してみよう。

モジュールのインポートを次の import MyComponent from '~/components/MyComponent'; のような具合に書き換えられ、これにより相対パス記述時にみられる冗長さ（例：../../../components）を回避できるはずだ。

babel プラグインをインストールする

babel-plugin-root-import をインストールしよう。

$ yarn add babel-plugin-root-import --dev
# or
$ npm install babel-plugin-root-import --save-dev

config-overrides.js に記述する

まず冒頭でインストールしておいた customize-cra のヘルパー関数を分割代入で読み込む。続いて override メソッドの引数に、addBabelPlugins メソッドでプラグインを設定する。

const { override, addBabelPlugins } = require('customize-cra');

module.exports = override(
  ...addBabelPlugins([
    'root-import',
    {
      rootPathPrefix: '~',
      rootPathSuffix: 'src',
    },
  ])
);

果たして、モジュールの import パスに alias を設定できた。

// before
import MyComponent from 'src/components/MyComponents';

// after
import MyComponent from '~/components/MyComponents';

まとめ

Create React App を eject せずにカスタマイズする方法の紹介だった。

「eject すると元に戻せない」と言われると、どうにも抵抗を覚えてしまうもので、当該エントリーの手段は、優れたソリューションではないだろうか。

サンプルでご覧にいれた import パスの alias 設定だったり、SVG ファイルを React コンポーネントとして読み込む設定だったりのカスタマイズシーンは想定できる。babel プラグインを加えたいという程度ならば、今後も活用していこうと思う。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。