React中使用 ts 后,craco库配置别名时需要注意什么?

文章目录


前言

我们都知道craco库可以用来覆盖react配置,如设置别名等。但是在项目使用 Typescript 后,我们需要额外配置,否则会造成编译报错。

详细craco配置可以查看之前文章:项目初始化与配置


编译报错如下

解决方式

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

c 复制代码
// tsconfig.json
{
  "compilerOptions": {
    // ....
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
    // ...
  },
}

总结

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

相关推荐
我叫汪枫几秒前
React Hooks原理深度解析与高级应用模式
前端·react.js·前端框架
我叫汪枫几秒前
深入探索React渲染原理与性能优化策略
前端·react.js·性能优化
阿智@1113 分钟前
推荐使用 pnpm 而不是 npm
前端·arcgis·npm
伍哥的传说24 分钟前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
IT_陈寒29 分钟前
Vite 5.0 终极优化指南:7个配置技巧让你的构建速度提升200%
前端·人工智能·后端
listhi52032 分钟前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript
安卓开发者40 分钟前
鸿蒙Next Web组件生命周期详解:从加载到销毁的全流程掌控
前端
我叫汪枫4 小时前
前端物理引擎库推荐 - 让你的网页动起来!
前端
雾恋8 小时前
最近一年的感悟
前端·javascript·程序员
A黄俊辉A9 小时前
axios+ts封装
开发语言·前端·javascript