【voice-ui】项目build后,无法使用

情景描述

在我项目基本做完后,打算发布npm,然后在另开一个新项目,试验做好的ui组件是否管用,结果在新项目中,导入并使用的时候,发现导出的Icon是undefined,然后去重新build看了一下,
在这里插入图片描述
在icon.d.ts里面只有一个icon的空壳,我明明在开发环境下写了内部函数体,但是却什么都没有得到(我开始以为是这个问题)

在这里插入图片描述

思路.历程

然后就觉得应该是webpack的配置有问题,我在github上找别人的代码,看了很多,要么就是放出来的就是成品ui框架,不会把开发的代码放出来,要么就是没有用webpack,总之就是找不到几乎一样的,就陷入了难地。

我首先去查webpack的配置,发现我的配置应该是没有问题的,

找不到原因,我想到,同样是框架,我把antd的来导入,看看他的Icon Button这些组件都链接到什么文件,再对比我的,
如下
在这里插入图片描述

可以看到antd的btn的链接导向的文件,依然是一个button.d.ts文件,而且也没有函数体,所以我的配置应该也没问题,就算有问题,也不是这个地方有问题,说明我刚刚的想法是错的,

然后我就去查这个文件是什么东西,在这里看到了这样的回答
在这里插入图片描述
紧接着下一条评论,跟我的目标有点一致了
在这里插入图片描述
看到,上面说,要使用导入的东西,实际上也是在js文件里面,ts文件只是给他一个类型声明,

那为什么我build出的也有js文件,引用的时候却还是undefined呢

我仔细看了一下antd的btn
当我点击btn组件的时候,跳到index.d.ts
在这里插入图片描述

在点这里面的Button的时候,跳到button.d.ts,然后就到头了
在这里插入图片描述
但是,这只是声明类型的文件啊,而且可以看到每个类型文件下都有一个同名的js文件,

那么在js文件里面点击Button进行测试跳转,
在这里插入图片描述
结果还是跳到了,button.ts下,结合我刚刚去查的webpack的配置 ,链接地址

在这里插入图片描述
react脚手架下用的antd,其中webpack的resolve.extensions 配置如下
在这里插入图片描述

我的webpack也配置了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值