使用 craco 为 React 项目简单而优雅的路径别名配置
计划选择
最近，做 反应 项目，然后就想到了为项目配置路径别名，毕竟我一直在看 ../../../ 等到这个很不爽，就想着配置一个项目 @ 作为一个项目 源代码 使用 的别名，这是之前完成的 Vue 项目自带一个 @ 路径别名，配置起来也很方便，不过看看 反应 ，它似乎不起作用。
到目前为止，我找到了两个解决方案：
- 利用
npm 运行弹出裸露配置配置文件夹，重写背包 - 使用第三方
@craco/craco.
想了想，我采用了第二种方案，因为我只是配置了一个路径别名，把 网页包 配置全部暴露，完全没有必要，而且 npm 运行弹出 是不可逆的。
利用 @craco/craco 其实很相似 vueconfig.js 重写默认配置的方法只是一个简单的文件，方便，没有精神负担。
安装 @craco/craco
我在这里使用 npm , 反应17
npm 我@craco/craco
复制代码
新的 craco.config.ts
存在 项目根目录 下创建 craco.config.ts 文档， 注意 : 不在 源代码 下。
因为我创造了 ts 项目，如果是 js 为项目 破解.config.js ，当然你也可以选择其他类型的配置文件，这里截取 @craco/craco npm 自述文件 ，其他形式就不介绍了。
存在 craco.config.ts 写：
常量路径 = 要求（“路径”）
模块。出口 = {
网络包：{
// 配置路径别名
别名：{
“@“： 小路。加入（__dirname，“src”），
},
},
}
复制代码
新的 path.tsconfig.json
也是在项目根目录下创建的，其实就是一个配置 tsconfig.json ，将要 延伸 表单导入，名称不必是 path.tsconfig.json ，因为我刚刚配置了路径别名，所以就拿了。
{
“编译器选项”：{
"baseUrl" : "./" ,
“路径”：{
“@/*”：[“src/*”]
}
}
}
复制代码
然后在项目中 tsconfig.json 导入它。
这其实也是为了让编辑器如 VSCode 知道这个路径别名，否则你的编辑器将无法感知到这个 路径别名 ，无法进行路径提示，甚至会报错。
怀疑：
为什么不直接
tsconfig.json配置，但要创建一个新的path.tsconfig.json，是不是画蛇添足？我一开始也是这样做的。然后我发现了一个问题，
反应项目开始 会覆盖你之前写的tsconfig.json，例如compilerOptions.paths，白写。不知道有没有人有同样的问题。
改写 脚本
最后一步，需要重写 包.json 的 脚本 .
最终效果
存在 VSCode 不需要手动导入，项目文件路径的改变会自动改变引用路径，完美。
但请注意 ,改变了 tsconfig.json 之后不会立即生效，建议重启 VSCode .
有什么问题可以在评论区提问，本文到此结束⚡️⚡️⚡️。
版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。
这篇文章的链接： https://homecpp.art/5924/10577/1723
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
