Webpack压缩打包JS在Safari 12.1.2报Unexpected token错误如何修复

报错本质是打包产物包含Safari 12.1.2不支持的ES高级语法，从错误信息看，触发问题的是类公共字段（Class Public Fields）语法——也就是在class内部直接写属性名 = 值的写法，这个特性在Safari 14之后才原生支持，12版本完全无法识别，解析到等号位置就直接抛出语法错误。
你当前的Webpack配置只做了最基础的合并压缩，没有配置JS语法降级规则，生产模式默认产出的代码面向近年发布的现代浏览器，不会主动把新语法转成老浏览器兼容的ES5版本，自然在旧版Safari上运行失败。

按以下步骤配置即可解决：

1. 安装转译依赖 #

Webpack本身只负责模块打包，不做语法降级，需要借助Babel相关工具完成语法转换，在项目根目录执行安装命令：

npm install -D babel-loader @babel/core @babel/preset-env core-js@3

2. 更新Webpack配置 #

在原有配置基础上添加JS文件的转译规则，明确指定兼容目标为Safari 12，修改后的完整配置如下：

const path = require("path");
module.exports = {
  entry: {
    theme: __dirname + "/assets/js/modules-theme/index.js",
    product: __dirname + "/assets/js/modules-product/index.js",
  },
  output: {
    filename: "[name].bundled.js",
    path: path.resolve(__dirname, "assets/js/"),
  },
  mode: "production",
  watch: true,
  // 输出兼容ES5标准的代码
  target: ["web", "es5"],
  module: {
    rules: [
      {
        // 匹配所有.js后缀文件
        test: /\.js$/,
        // 默认跳过node_modules里的第三方包，提升打包速度
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  // 指定兼容的浏览器版本
                  targets: {
                    safari: "12.1"
                  },
                  // 按需注入兼容补丁，只转译目标浏览器不支持的语法
                  useBuiltIns: "usage",
                  corejs: 3
                }
              ]
            ]
          }
        }
      }
    ]
  }
};

3. 可选优化 #

如果后续需要兼容更多浏览器，不需要反复修改Webpack配置，可以直接在项目根目录的package.json里添加browserslist字段统一声明兼容范围，配置示例：

{
  "browserslist": [
    "Safari >= 12.1",
    "> 1%",
    "not dead"
  ]
}

添加后Babel和Webpack都会自动读取这个配置，不需要在loader配置里重复写targets项。

注意事项 #

• 如果后续运行发现某个第三方npm依赖也触发了同样的语法错误，说明这个依赖本身没有提供ES5版本的代码，只需要调整exclude规则，把对应依赖包名加入转译范围即可。
• 配置修改完成后，停止当前的watch进程，重新启动打包，新生成的产物就可以在Safari 12.1.2上正常运行。

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