刘念的个人博客

0%

React 使用TypeScript时customize-cra配置别名无效的解决办法

React 使用TypeScript时customize-cra配置别名无效的解决办法

想用TypeScript做一个个人的项目,结果在启动的时候就遇到了问题,customize-cra配置路径别名的时候总是报错,网上搜的都是旧版的,官网也只有JS的配置。后来在这个issues下找到了答案,再这记录一下。

首先在根目录下新建config-overrides.js

1
2
3
4
5
//引入需要的组件
const {
override,
addWebpackAlias,
} = require('customize-cra');

然后写入配置:

1
2
3
4
5
6
7
8
const path = require('path');

module.exports = override(
addWebpackAlias({
// eslint-disable-next-line no-useless-computed-key
["@"]: path.resolve(__dirname, "src"),
}),
);

网上的教程都到此为止。时机后面应该还有一步。

在根目录下新建paths.json(叫什么名无所谓,和接下来的配置保持一致就行)

1
2
3
4
5
6
7
8
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["*"]
}
}
}

然后在tsconfig.json里加入:

1
"extends": "./paths.json"

重启项目

1
import Hello from "@/components/Hello";

不再报错,配置成功。