webpack未转译第三方依赖axios为es5导致低端机型功能异常

小玉子2025-07-18 14:09

背景：

兼容性测试流程中，遇到华为p9手机上的页面按钮点击无反应的问题。开发者工具查看后发现报错如下：

根据报错信息检查了一下页面引用的vendors包，发现有...语法，来自于第三方依赖axios。

原因：

axios包有es6语法，而我的项目的webpack.config.js配置的babel-loader排除了所有的node_modules的编译。如下：

javascript 复制代码

{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        },
      },

这样就不会编译axios为es5。

解决方案：

babel-loader也需要编译axios，配置如下：

javascript 复制代码

{
        test: /\.js$/,
        exclude: /node_modules\/(?!(axios)\/).*/, // 仅转译axios等必要库
        use: {
          loader: 'babel-loader'
        },
      },

重新打包后，发现axios已被编译为es5，页面按钮点击正常，bug修复。

优化：

为了防止这个问题的再次发生，在webpack打包后加了一次是否是es5代码的检查，利用webpack-shell-plugin和es-check。

webpack-shell-plugin 是一个 Webpack 插件，它允许你在 Webpack 构建过程的不同阶段执行 shell 命令。
es-check 是一个用于检查 JavaScript 代码是否符合指定 ECMAScript (ES) 版本规范的工具，可以帮助你在构建流程中确保代码兼容性。

ini 复制代码

// webpack.config.js
const WebpackShellPlugin = require('webpack-shell-plugin');
module.exports = {
	plugins: [
    new WebpackShellPlugin({onBuildEnd:['npm run check-es5']})
  ],
}

json 复制代码

// package.json
  "scripts": {
	"check-es5": "es-check es5 './output/*.js'"
}

这样会在webpack打包之后，对打包的js文件做一次检查。