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

最新推荐文章于 2023-07-25 11:00:00 发布

VoiceU

最新推荐文章于 2023-07-25 11:00:00 发布

阅读量264

点赞数

分类专栏：疑难点记录面试 voice-ui 文章标签： js react typescript webpack

本文链接：https://blog.youkuaiyun.com/Voiceu/article/details/118518401

版权

在完成voice-ui项目后，作者在新项目中发现build后的组件引用报错， Icon为undefined。经过排查，作者发现是webpack配置问题，没有将每个组件转换成对应的js文件。通过对比antd的配置，作者了解到需要为每个组件设置entry。最终通过动态添加webpack多入口解决了问题，成功生成了每个组件的js文件并能正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

情景描述

在我项目基本做完后，打算发布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也配置了
在这里插入图片描述
所以，可以不用写后缀就直接引用，但是出现同名的js和ts的时候，到底引用的谁呢

结合上面的评论，我觉得应该是引用的时候，虽然可以不写后缀，webpack的配置只是在写的时候，可以忽略，但是实际上引用的也是同名的js文件，毕竟ts到头来也得转换成js才能用，所以问题在于我的每个组件下，并没有相应的js文件，只有一个s.ts的文件，而antd的却有，所以他能够正确引用，而我那个就不行了，暂时是这样想的，查查其他资料看看先。