create-react-app(CRA)でAlias Pathを設定する方法
こんにちは。みやぞんです。
以前create-react-app製のReactアプリケーションのAlias Pathの設定で苦戦した事があったため、記事にして情報を共有します。
※現在、弊社Another worksが展開する複業クラウドのフロントエンド開発スタックはすべてNext.js＋TypeScriptで行っています。
導入背景
Alias Pathはパスを設定する際にわずらわしいパスの記述を短縮して簡潔にかける仕組みになります。
当時弊社ではReactを採用しており、インポート文におけるパスの記述でまさにその煩わしさを感じていたのと、別プラットフォームのNext.jsではそのAlias Pathを利用していたので統一したい想いがありました。
Alias Pathとは、import { SomeComponent } from '@/components/SomeComponent のようなものです。
Next.jsではAlias Pathがサポートされており、以下の記事のように簡単に設定できます。
Reactでも設定は可能なのですが、create-react-app製であると内部にwebpackの諸々の設定が隠蔽されてしまうので、アプリケーションを作る上では非常に便利なのですが、こういったところで微妙につらみがてきてしまいました。
CRAでAlias Pathを設定するには
CRAではwebpackやbabelの設定が内部で勝手に行われているためにファイルがそもそも存在しないません。
そこで、設定を変更するには以下の2つの方法があります。
- npm run ejectでCRAをejectする
- cracoやrewiredといった拡張ツールでCRAの設定を拡張(上書き)する
EjectするとReactアプリのトッププレイヤーにwebpackやbabel系のファイルが出てくるので手動で設定可能になります。しかしさすがにCRAの恩恵をAlias Pathのためだけに捨てるのは微妙なので後者を選択しました。
CRA拡張ツールの選択肢
react-app-rewiredは今後のサポートが不安そうな部分もあったので、今回はCRACO利用しました。
react-app-rewired
CRACO
CRACOをインストールしたら、package.jsonのコマンド類を説明書きどおりに書き換えましょう。
ファイルの変更
変更するファイルは以下の3つになります。
- craco.config.js
- tsconfig.json
- tsconfig.paths.json
// craco.config.js
const path = require('path');
module.exports = {
webpack: {
alias: {
'~': path.resolve(__dirname, './src/'),
},
},
};
tsconfig.jsonで"extends": "./tsconfig.paths.json" を含めましょう。
// tsconfig.json
{
"compilerOptions": {
"target": "es6",
"sourceMap": true,
"lib": ["dom", "dom.iterable", "esnext", "es2019"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"baseUrl": "./src",
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "src/**/*.spec.ts"],
"extends": "./tsconfig.paths.json"
}
// tsconfig.paths.json
{
"compilerOptions": {
"paths": {
"~/*": ["./*"],
}
}
}
これでAlias Pathが動作します。
おわりに
以上が、CRA製のReactアプリケーションにAlias Pathを設定する方法になります。
webpack関連を気にしなくても良いのは非常に便利ですが、こういった細かい部分に関しては便利なライブラリを使用しながら適応していく必要がありそうです。
Discussion