背景
webpack打包文件时,$export is not a function
其实并不算是一个少见的错误,具体体现为js打包后引入,浏览器报类似如下错误:
导致这个问题的原因很多,我这边是因为将旧项目的其中一部分组件迁移至另外一个项目(事后想想,其实这才是我这次问题的根本原因,😅)。
解决方案
-
1 babel编译去除node_mocules
这是最主流的一种解决办法,通过修改webpack配置文件,去除babel-loader对node-modules的编译,如下图:
通常这一步90%可以解决你的问题了,可惜的是我的问题并没有解决!(⊙﹏⊙) - 2 检查依赖
方法1试过之后未果,然而由于方法1的引导,一直以为是webpack配置问题(因为两个项目中用的webpack版本不同),因此在打包配置上寻寻觅觅了好久,可惜实在没有发现什么突破点。
最后突然想到,还有一个终极debug大法没用,排除法,😅!,于是我把迁移过来的组件内容全部去掉,只留最基础的vue结构,果然没问题!接下来就简单了,一个一个import往里面加,最终果然找到罪魁祸首子组件。下面继续一行一行注释去找根源文件,最后终于发现,竟然是一个依赖没有引入!!!蠢得无可附加了(⊙﹏⊙),最终解决方案就是引入了这个依赖,这个问题就解了。整个过程就是这么狗血,而且比较奇怪的是,并不是所有依赖都会导致这个问题,我手动删掉其他依赖测试,并不会导致这个问题,后续会继续研究研究,有结果再更!
总结就是,如果上面的方法1没用,你可以检查下你的依赖,是否所有依赖都已经安装引用到位! - 3 循环依赖检查
如果上面两个方法都没用,可以尝试检查下自己代码中是否有循环依赖,到这一步,只能祝你好运了!
The End