情景描述
在我项目基本做完后,打算发布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的却有,所以他能够正确引用,而我那个就不行了,暂时是这样想的,查查其他资料看看先。
成功解决bug
过程是真的艰辛哦,没人带,到处查资料,写论文都没这么费脑壳(小声bb)
终于找到原因了,跟我上面的