计划选择
最近,做 反应
项目,然后就想到了为项目配置路径别名,毕竟我一直在看 ../../../
等到这个很不爽,就想着配置一个项目 @
作为一个项目 源代码
使用 的别名,这是之前完成的 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 版权协议,转载请附上原文出处链接和本声明
本文链接:https://www.qanswer.top/39256/40092511
标签:配置,路径,别名,React,json,craco,tsconfig From: https://www.cnblogs.com/amboke/p/16727566.html