解决React启动自动覆盖tsconfig配置文件

当使用create-react-app创建的React项目集成typescript时,启动会覆盖tsconfig配置。为了解决这个问题,可以通过配置别名在`config-overrides.js`中避免自动覆盖。设置好别名后,在`tsconfig.json`中指定,并创建`paths.json`文件以定义typescript的别名路径。完成这些步骤后,启动项目,若能正常运行则说明配置成功。
摘要由CSDN通过智能技术生成

大坑,create-react-app创建的项目在启动时会自动覆盖tsconfig.json中的某些配置

使用create-react-app创建的项目,需要集成typescript,则安装依赖之后,启动项目会自动在项目的根路径下面创建tsconfig.json的关于typescript的配置文件,但是对于某些属性,例如paths则会在每次启动的时候进行覆盖

解决方案

在组件中需要引用其他的文件时,一般可以使用相对路径来引用,但是看起来并不是特别好看,而且层级较深的情况下,看起来不是特别优雅,所以可以配置别名的方式来引用文件

  • config-override.js中配置别名

    这里没有指定npm run eject,所以采用了react-app-rewired的方式来配置webpack

    • 如果没有配置config-override.js,则

      npm install react-app-rewired --save-dev
      npm install customize-cra --save-dev
      
    • 手动在项目根路径下面创建config-override.js配置文件

      const {
              override, addWebpackAlias } = require('customize-cra')
      const path = require('
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值