使用craco， 简单优雅地为React项目配置路径别名

方案选择

最近时间，做react项目，然后就想着给项目配置路径别名，毕竟老看着../../../等这种非常难受，就想着给项目配置个@作为项目src的别名拿来使用，之前做的vue项目自带一个@路径别名，并且也非常方便配置，但查了下react，好像并不好弄。

目前来说，我找到了两种方案：

1. 使用npm run eject暴露config配置文件夹，来改写wabpack
2. 使用第三方的@craco/craco。

经过思考，我采用的是第二种方案，因为只是配置个路径别名，把webpack配置全部暴露出来，完全没必要，而且npm run eject是不可逆的。

用@craco/craco其实非常像vueconfig.js的做法，只用一个简单文件去改写默认配置，方便，没有心智负担。

安装@craco/craco

这里我使用的是npm，react17

npm i @craco/craco

新建craco.config.ts

在项目根目录下创建craco.config.ts文件，注意：不是在src下。

因为我创建的是ts的项目，如果是js的项目用craco.config.js，当然你也可以选择其他类型的配置文件，这里截取@craco/craco npm Readme，其他形式的不做介绍。

在craco.config.ts写入：

const path = require("path")

module.exports = {
  webpack: {
    // 配置路径别名
    alias: {
      "@": path.join(__dirname, "src"),
    },
  },
}

export{}

新建path.tsconfig.json

也是在项目根目录下创建，这其实是在配置tsconfig.json，会以extends形式导入，名字不一定是要path.tsconfig.json，因为我只是配置路径别名，所以就这么取了。

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

然后在项目中的tsconfig.json导入它。

这其实是也为了让编辑器如VSCode认识这个路径别名，不然你的编辑器无法感知到这个路径别名，不能进行路径提示，甚至会报错。

疑问：

为什么不直接在tsconfig.json进行配置，而要新建一个path.tsconfig.json，不是多此一举？我刚开始也是这么做的。

然后我就发现一个问题，react项目启动会重写覆盖你之前写的tsconfig.json，比如compilerOptions.paths，直接白写了。不知道有没有人遇到同样的问题。

改写scripts

最后一步，你需要去改写package.json的scripts。

最终效果

在VSCode中使用，都不需要手动导入，项目文件路径变化也会自动改变引用路径哦，简直完美。

不过要注意的是，改了tsconfig.json后，并不能马上生效，建议是重新启动VSCode。

如果有什么问题可以在评论区问，本文到此结束⚡️⚡️⚡️。