使用Babel env preset后Bundle仍含const，Safari 9.x报语法错误

这个问题我之前帮客户排查过类似的，Safari 9.x对ES6+语法的支持确实有不少坑，尤其是严格模式下的const声明问题——哪怕用了babel-loader，配置没到位也白搭。下面是一步步的排查和解决思路：

1. 先确认Babel预设的目标浏览器配置 #

你用了babel-loader，但大概率是@babel/preset-env的目标没指定Safari 9，导致Babel没针对性转译ES6语法。修改你的Babel配置（不管是.babelrc还是webpack里的loader options）：

{
  presets: [
    ['@babel/preset-env', {
      targets: {
        safari: '9'
      },
      useBuiltIns: 'usage', // 按需引入兼容补丁
      corejs: 3 // 需要先安装corejs@3，执行npm install core-js@3 --save
    }]
  ]
}

这里核心是告诉Babel：要兼容Safari 9，所有不兼容的语法都要转成ES5。

2. 别漏了第三方依赖的转译 #

很多时候报错不是来自你的代码，而是项目里的第三方npm包——有些现代库会保留ES6代码，而默认webpack的babel-loader只转译src目录下的文件，导致这些依赖在Safari 9里报错。你需要修改webpack的module规则，把需要转译的依赖包加进去：

module: {
  rules: [
    {
      test: /\.js$/,
      // 排除node_modules，但指定需要转译的包（比如axios、lodash-es这类）
      exclude: /node_modules\/(?!(axios|lodash-es)\/)/,
      use: {
        loader: 'babel-loader',
        options: {
          // 你的Babel配置
        }
      }
    }
  ]
}

3. 针对性解决const的转译问题 #

如果上面的配置还没解决，你可以单独加个Babel插件专门处理块级作用域的变量：

{
  plugins: ['@babel/plugin-transform-block-scoping']
}

这个插件会把const和let转译为Safari 9能兼容的var写法，彻底解决严格模式下的const报错。

4. 验证转译结果 #

构建完成后，打开打包后的JS文件搜一下const关键字，如果还有残留，说明某个模块没被转译。可以用webpack-bundle-analyzer分析打包产物，定位到包含const的模块，再针对性调整转译范围。

另外提醒下，Safari 9.x还不支持箭头函数、Promise这些特性，所以@babel/preset-env的targets配置一定要准确，确保所有必要的兼容补丁都能加上。

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