首页 > 其他分享 >使用 craco 为 React 项目简单而优雅的路径别名配置

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

时间:2022-09-25 11:57:59浏览次数:77  
标签:配置 路径 别名 React json craco tsconfig

计划选择

最近,做 反应 项目,然后就想到了为项目配置路径别名,毕竟我一直在看 ../../../ 等到这个很不爽,就想着配置一个项目 @ 作为一个项目 源代码 使用 的别名,这是之前完成的 Vue 项目自带一个 @ 路径别名,配置起来也很方便,不过看看 反应 ,它似乎不起作用。

到目前为止,我找到了两个解决方案:

  1. 利用 npm 运行弹出 裸露 配置 配置文件夹,重写 背包
  2. 使用第三方 @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 自述文件 ,其他形式就不介绍了。

image-20220924160635003

存在 craco.config.ts 写:

 常量路径 = 要求(“路径”)  
  
 模块。出口 = {  
 网络包:{  
 // 配置路径别名  
 别名:{  
 “@“: 小路。加入(__dirname,“src”),  
 },  
 },  
 }  
 复制代码

新的 path.tsconfig.json

也是在项目根目录下创建的,其实就是一个配置 tsconfig.json ,将要 延伸 表单导入,名称不必是 path.tsconfig.json ,因为我刚刚配置了路径别名,所以就拿了。

 {  
 “编译器选项”:{  
 "baseUrl" : "./" ,  
 “路径”:{  
 “@/*”:[“src/*”]  
 }  
 }  
 }  
 复制代码

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

image-20220924162141939

这其实也是为了让编辑器如 VSCode 知道这个路径别名,否则你的编辑器将无法感知到这个 路径别名 ,无法进行路径提示,甚至会报错。

怀疑:

为什么不直接 tsconfig.json 配置,但要创建一个新的 path.tsconfig.json ,是不是画蛇添足?我一开始也是这样做的。

然后我发现了一个问题, 反应 项目开始 会覆盖你之前写的 tsconfig.json ,例如 compilerOptions.paths ,白写。不知道有没有人有同样的问题。

改写 脚本

最后一步,需要重写 包.json 脚本 .

image-20220924163441884

最终效果

存在 VSCode 不需要手动导入,项目文件路径的改变会自动改变引用路径,完美。

但请注意 ,改变了 tsconfig.json 之后不会立即生效,建议重启 VSCode .

2

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

版权声明:本文为博主原创文章,遵循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

相关文章

  • 关于 React 性能优化的那些事
    我报名了金石计划的第一个挑战——瓜分10万奖池,这是我的第一篇文章,点击查看活动详情要明确性能优化的原理,需要了解它的前世今生,需要回答以下问题:React如何渲染页面?......
  • vue3和react虚拟DOM的diff算法区别
    vue3随着Vue3.0版本的发布,我们在使用或者对其源码进行阅读时会惊讶的发现,它又又又双叒叕变强了,尤大本人在直播中也提到新的Vue会比老的Vue有1.3到2倍的提升,它的更新机制会......
  • ssh的免密登录配置和设置别名
    目录ssh的免密登录和设置别名ssh的免密登录和设置别名参考:SSH免密登陆和设置别名......
  • 关于react学习整理
    第一步.创建react流程1npxcreated-react-app名称2.切换cd./myapp3.启动npmstart 第二步参考如下        ......
  • 2022 年你需要知道的关于 React Context 的一切,第 1 部分
    文章摘录2022年你需要知道的关于ReactContext的一切,第1部分摘录自快速反应,第二版作者:莫滕·巴克伦德这段摘录探讨了使用ReactContext。如果您是React开发......
  • React Typescript 中的依赖道具
    ReactTypescript中的依赖道具一个依赖的道具是一个prop,只有在另一个prop具有特定值时才应设置。在下面的示例中,我们可以看到一个用例(单击[打开沙盒](https://code......
  • 使用 RainbowKit 和 React 制作漂亮的 Connect Wallet 按钮
    使用RainbowKit和React制作漂亮的ConnectWallet按钮Web3中的身份验证非常简单,但支持所有钱包并制作漂亮的UI可能会很痛苦且耗时。值得庆幸的是,有许多库也使这......
  • React useImperativeHandle Hook 90% 前端都不知道转发多个 Refs
    我报名了GoldstoneProjectPhase1Challenge——瓜分100,000奖池,这是我的第13篇文章,点击查看活动详情为什么ref不属于props,而是需要forwardRef呢?当我们有一个非常简单......
  • [电容教程] 将 react app 转为 Android/ios app
    [电容教程]将reactapp转为Android/iosapp什么是电容器?电容器是一个跨平台的应用程序运行时,可以轻松构建在iOS、Android和Web上原生运行的Web应用程序。我们......
  • 【vue3】reactive不能直接赋值的解决方法
    在vue3里,ref和reacitve都可以定义响应式数据,但是两者有所不同。在使用reactive定义复杂结构的响应式数据时,如果你要对其赋值,会丢失其响应性。然后赋值是我们经常进行的操作......