今天运行H5项目遇到报错:

Uncaught TypeError: _interopRequireDefault is not a function

去代码里一搜_interopRequireDefault,懵逼了,我代码里并没有这个方法。

后来在报错检查里发现,是webpack里面的方法。

更懵逼了,我做了什么?webpack都报错了!

回想一下,我主要是导入了swiper库,做了个自循环轮播图的功能。但是这不是我第一次用swiper,以前也没出现这样的错。

而且奇怪的现象是,我本地运行是没有问题的,通过远程命令打包的方式就报错了。

问题解决方法一

后来发现是本地和远程打包生成的package-lock.json文件不一致导致的。

一般情况,本地的package-lock.json文件是不会上传到git的,所以远程打包时会重新生成这个文件,可能是npm源问题,或者是网络问题,导致远程新生成的package-lock.json与本地生成的不一致。

解决办法是,把本地生成的package-lock.json文件上传到远程目录进行打包,有了这个文件,远程就不会生成新的文件。

执行

npm run build

(根据实际情况可修改打包命令)

运行成功。

问题解决方法二

用上面的方法本来已经打好包了,不知道是因为我每次都提交package-lock.json文件,还是服务器打包命令每次npm install会改变环境。今天想打包给测试验证,发现又不行了。。。

没办法,只好另外开辟路子。

以下是来自前端大佬们的解决方案。

报错的原因是webpack编译出的源码里,_interopRequireDefault()方法调用放在了初始化之前。因为var的变量提升,var _typeof2 = _interopRequireDefault(__webpack_require_调用的的时候,_interopRequireDefault还没有被赋值,是undefined。

        var _typeof2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/typeof */            
        "../../@babel/runtime/helpers/typeof.js"));
        __webpack_require__(/*! core-js/modules/es6.number.constructor.js */
        "../../core-js/modules/es6.number.constructor.js");
        __webpack_require__(/*! core-js/modules/es6.object.prevent-extensions.js */
        "../../core-js/modules/es6.object.prevent-extensions.js");
        __webpack_require__(/*! core-js/modules/es6.object.seal.js */
        "../../core-js/modules/es6.object.seal.js");
        __webpack_require__(/*! core-js/modules/es6.weak-set.js */
        "../../core-js/modules/es6.weak-set.js");
        __webpack_require__(/*! core-js/modules/es6.array.sort.js */
        "../../core-js/modules/es6.array.sort.js");
        __webpack_require__(/*! core-js/modules/es6.object.is.js */
        "../../core-js/modules/es6.object.is.js");
        var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */
        "../../@babel/runtime/helpers/interopRequireDefault.js");
        __webpack_require__(/*! core-js/modules/es6.set.js */
        "../../core-js/modules/es6.set.js");
        __webpack_require__(/*! core-js/modules/es6.object.freeze.js */
        "../../core-js/modules/es6.object.freeze.js");

这个问题出现,有可能是因为babel版本库最近修改了什么导致版本不兼容。

所以解决方案是寻找一个稳定的babel版本库,来替换掉当前的版本。

用postinstall重置babel库引用

Postinstall官方定义:在开发或发布之前使用Postinstall来转换devDependencies,使用它来部署依赖项。

这是专门针对以上配置混乱的情况下,对依赖库们进行一遍二次梳理,让不合理的配置变得合理。

废话少说,看看本次案例的postinstall的配置。

package.json

{
       "scripts": {
        "postinstall": "npm i @babel/generator@7.16.7 @babel/helper-compilation-targets@7.16.7 @babel/helper-module-transforms@7.16.7 @babel/types@7.16.7 @babel/helpers@7.16.7 @babel/helpers@7.16.7 @babel/parser@7.16.7 @babel/compat-data@7.16.4 @babel/traverse@7.16.7"
    },

    "dependencies": {
        "postinstall": "^0.7.4",
    },
}

配置使用说明:

  • 这里指定了babel系列依赖库版本号为:7.16.7
  • 需要注意的是babel库的依赖顺序不能随意更换,按这个顺序配置目前没有问题
  • 需要先npm install postinstall
  • 然后在package.json里面配置script
  • 最后在打包编译前运行npm run postinstall

希望这是最终解决方案,更希望维护babel库的大佬们早日修复bug,万分感谢!