使用Webpack+Babel编译React/ES6代码，Safari 8及以下报const严格模式错误

嘿，这个问题我之前帮同事排查过类似的，咱们一步步来搞定它：

首先得明确核心：Safari 8对ES6的支持非常有限，哪怕你觉得编译后的代码里没const，大概率是某个依赖包没被Babel转译，或者你的Babel/Webpack配置没覆盖到所有需要处理的代码。

可能的原因及对应解决方案 #

1. 检查Babel配置是否覆盖旧浏览器需求 #

先确保你的Babel配置（.babelrc或babel.config.js）正确配置了针对Safari 8的转译规则：

• 先装必要的依赖：

  npm install @babel/preset-env @babel/preset-react --save-dev
  

• 给你个配置示例（.babelrc）：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "browsers": ["last 2 versions", "safari >= 8"]
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }],
      "@babel/preset-react"
    ]
  }
  

  这里targets明确指定要支持Safari 8，useBuiltIns和corejs会自动补全旧浏览器缺的API，避免兼容性缺口。

2. 让Webpack确保所有必要代码都被Babel转译 #

很多时候我们会忽略node_modules里的依赖——如果某个依赖用了未转译的ES6语法（比如const），Webpack默认不会碰它，这就会导致旧浏览器报错。你得修改Webpack的module.rules里Babel Loader的规则：

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        // 如果你确定某些依赖不需要转译，可以单独exclude，否则先去掉这个规则排查
        // exclude: /node_modules/,
        include: [
          path.resolve(__dirname, 'src'),
          // 把需要转译的依赖包路径加在这，比如某个用了ES6的UI组件库
          path.resolve(__dirname, 'node_modules/your-es6-dependency')
        ],
        use: 'babel-loader'
      }
    ]
  }
};

要是不确定哪个依赖出问题，可以先临时删掉exclude: /node_modules/，重新编译后测Safari 8，如果问题消失，再逐步排查是哪个依赖搞的鬼。

3. 检查严格模式相关配置 #

错误提示提到了“strict mode”，要确认你的代码或Webpack插件有没有强制开启严格模式但没处理好兼容。Babel转译时会自动处理严格模式的兼容，但如果第三方代码手动开了严格模式又用了未转译的ES6，就会触发这个错误。

4. 直接检查编译后的代码 #

把app.js.gz解压，搜一下const关键字，看看它出现在哪儿：如果是依赖的代码，那就是这个依赖没被转译；如果是你的代码，那说明Babel转译没生效，得检查配置有没有正确加载。

额外小技巧 #

• 如果预设没覆盖到const/let的转译，可以单独装@babel/plugin-transform-block-scoping插件，把它们转成var：

  npm install @babel/plugin-transform-block-scoping --save-dev
  

  然后在Babel配置的plugins数组里加上它就行。

• 测试的时候可以用旧版Xcode里的Safari 8模拟器，或者用BrowserStack这类工具，确保修改后的代码真的能跑起来。

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