React中使用 ts 后，craco库配置别名时必要注意什么？

---

媒介

我们都知道craco库可以用来覆盖react配置，如设置别名等。但是在项目使用 Typescript 后，我们必要额外配置，否则会造成编译报错。
详细craco配置可以查看之前文章： 项目初始化与配置

---

编译报错如下

解决方式

找到本地tsconfig.json文件，添加如下配置，重新启动项目，报错就可以解决了

1. // tsconfig.json
2. {
3.   "compilerOptions": {
4.     // ....
5.     "baseUrl": "./src",
6.     "paths": {
7.       "@/*": ["*"]
8.     }
9.     // ...
10.   },
11. }

复制代码

---

总结

在使用 craco库时，必要同时在 tsconfig.json 文件中配置别名，因为 craco库是用于配置 Webpack 的别名，而不是 TypeScript 的别名。TypeScript 的别名是在 tsconfig.json 文件中配置的，而 Webpack 的别名可以通过craco库进行配置。这是因为 TypeScript 和 Webpack 在处理惩罚别名时有一些不同的方式，TypeScript 会在编译时将别名替换为实际路径，而 Webpack 在打包时会使用别名来剖析模块路径。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。