調査：CRAで作成したReactアプリケーションで、importのaliasesを設定する方法

cracoパッケージをインストールして、webpackの設定を上書きできるようにする方法がメジャーなようだ。
https://github.com/dilanx/craco

react-create-appで作成したプロジェクトにimportのaliasを設定する

メモ

• cracoパッケージをインストールして、webpackの設定を上書きできるようにする。
• webpackの設定
  • craco.config.jsでaliasの設定
  • package.jsonで、react-scriptsからcracoに変更
• TypeScriptの設定
  • tsconfig.paths.jsonでpathを設定
  • tsconfig.jsonでtsconfig.jsonを読み込む
• ESLintの設定
  • eslint-import-resolver-aliasプラグインをインストール
  • eslintrc.jsで設定追加

【create-react-app】webpackのaliasをTypeScriptでも有効にする方法は

メモ

• craco使う
• craco.config.js
  • craco-aliasプラグイン(DEPRECATED)を使った設定が、上記のやり方と違う。
• tsconfig.json
• tsconfig.patsh.json

craco.config.jsの書き方だけが上記とは違ったが、deprecatedのプラグインを使っているのでこのやり方はしないかな。

Stack overflow: How to make an import shortcut/alias in create-react-app?
Answer: https://stackoverflow.com/a/63068531/18149985

メモ

• 公式な方法は、eject scriptだけど、おすすめの方法はejectせずにcracoパッケージを使うこと。
• やり方は上記と同じ。