Webpack与Babel未转换Vendor代码中箭头函数的问题求助

我来帮你搞定这个问题！核心原因是Babel默认不会处理node_modules目录下的库代码，所以你的vendors.js里的第三方库箭头函数没被转换，而Safari 8及以下版本不支持箭头函数，就会报错。下面是具体解决方案：

方案1：让Babel处理特定第三方库 #

如果某个库本身发布的是ES6代码（没有预编译成ES5），你可以修改构建配置（比如Webpack），让Babel排除node_modules但例外处理这个库：

Webpack配置示例 #

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        // 排除node_modules，但保留需要转译的库（把"xxx-lib"换成你的库名）
        exclude: /node_modules\/(?!(xxx-lib)\/)/,
        options: {
          presets: [
            ["env", {
              "modules": false,
              "targets": {
                "browsers": [
                  "> 1%",
                  "iOS >= 8.0",
                  "Android >= 4.4",
                  "Chrome >= 30",
                  "Safari >= 6",
                  "Firefox ESR",
                  "Opera 12.1"
                ]
              }
            }]
          ],
          plugins: ["transform-es2015-arrow-functions"]
        }
      }
    ]
  }
}

方案2：确认第三方库是否提供ES5兼容版本 #

很多库会在package.json里指定main字段指向ES5编译后的文件，或者在dist目录下提供ES5版本。你可以：

• 检查库的package.json，确认main/browser字段是否指向ES5文件
• 直接在代码里引用库的dist目录文件，比如import xxx from 'xxx-lib/dist/xxx.es5.js'

方案3：替换不兼容的库 #

如果某个库始终没有ES5兼容版本，且无法通过Babel转译（比如依赖未转译的ES6+特性），可以考虑找功能类似的、已预编译为ES5的替代库。

方案4：检查Babel配置完整性 #

确保你的.babelrc里正确包含了必要的插件或预设：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": [
          "> 1%",
          "iOS >= 8.0",
          "Android >= 4.4",
          "Chrome >= 30",
          "Safari >= 6",
          "Firefox ESR",
          "Opera 12.1"
        ]
      }
    }]
  ],
  "plugins": ["transform-es2015-arrow-functions"]
}

注意：@babel/preset-env会根据你指定的targets自动引入所需的转换插件，所以其实单独加transform-es2015-arrow-functions可能不是必须的，但加上可以确保箭头函数被转换。

内容的提问来源于stack exchange，提问作者W F