간단한 페이지 하나 그냥 쓰자 했다가 '../../../.."를 보는 순간 바로 해결하기로 마음먹었다 ㅋㅋㅋㅋ 다음에 기억 안나면 다시 보기!
$ yarn add @craco/craco
$ yarn add craco-alias -D
// tsconfig.paths.json
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@src/*": ["src/*"],
"@assets/*": ["src/assets/*"],
"@components/*": ["src/components/*"],
"@context/*": ["src/context/*"],
"@pages/*": ["src/pages/*"]
}
}
}
// craco.config.js
const CracoAlias = require('craco-alias');
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
source: 'tsconfig',
baseUrl: './',
tsConfigPath: 'tsconfig.paths.json',
},
},
],
};
// tsconfig.json
{
"compilerOptions" : { ... },
"include": [
"src",
"craco.config.js"
],
"extends": "./tsconfig.paths.json"
}
// .eslintrc.json
{
"rules" : { ... },
"settings": {
"typescript": {},
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
craco-alias 없이도 alias 설정이 가능하다. 1, 3, 4번 단계는 위와 동일하고 craco 설정만 추가한다.
$ yarn add @craco/craco
// craco.config.json
const path = require('path');
module.exports = {
webpack: {
alias: {
'@': path.resolve(__dirname, 'src/'),
'@assets': path.resolve(__dirname, 'src/assets'),
'@components': path.resolve(__dirname, 'src/components'),
'@pages': path.resolve(__dirname, 'src/pages'),
'@context': path.resolve(__dirname, 'src/context'),
},
},
};
글 잘 봤습니다! 그런데 craco.config.json이 아니라 craco.config.js 인거 같네요!