import文を相対パスで記載せず、絶対パスで記載するやり方。
webpackの設定を変更するためのパッケージ、react-app-rewired
をインストールする。
https://github.com/timarney/react-app-rewired
❯ yarn add react-app-rewired -D
先程インストールしたパッケージに合わせて、package.json内のデフォルトのscript部分を書き換える。
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject",
ルート階層にconfig-overrides.js
を作成し、alias設定の記述を書き込む。
const path = require('path')
module.exports = (config) => {
config.resolve = {
...config.resolve,
alias: {
...config.alias,
// 以下に指定したいalias名と、対応パスを記述
'@js': path.resolve(__dirname, './src/js'),
'@data': path.resolve(__dirname, './src/data'),
'@styles': path.resolve(__dirname, './src/styles'),
}
};
return config;
}
create-react-app環境だとtsconfig.json
でpaths
を指定できないため、(react-scripts start
した時にpaths
オプションが自動で消されてしまう)
compilerOptions
の記述の前に、extendsの記述を追加し、別ファイルで設定を行う。
{
"extends": "./tsconfig.paths.json",
"compilerOptions": {
// 省略
}
config-overrides.js
の設定に対応するpaths
を記述する。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@js/*": ["./src/js/*"],
"@data/*": ["./src/data/*"],
"@styles/*": ["./src/styles/*"],
}
}
}
これでsrc
配下のファイルでimport文を書くとき、絶対パスaliasを使用することができる。
// こんな長いパス指定も
import hoge from "../../../js/component/hoge";
// aliasでスッキリ
import hoge from "@js/component/hoge";