Safari9/10下React应用因Redux嵌套函数声明报错如何解决

Safari 9/10 对ES6块级函数声明的规范支持存在缺陷，严格模式下禁止在if等嵌套块内声明函数，你遇到的报错是旧版本Redux的开发环境调试代码刚好触发了这个语法限制。

1. 升级Redux到兼容版本 #

• Redux v4.0.0及以上版本已经官方修复了这个兼容问题，是成本最低的解决方案。如果你的项目当前依赖v3.x等旧版Redux，直接执行npm install redux@4或者更高稳定版本即可。

2. 配置打包工具编译Redux源码 #

如果项目因为依赖锁版等原因无法升级Redux，可以通过语法编译转换违规代码：

• 首先安装babel插件：npm install @babel/plugin-transform-block-scoped-functions --save-dev
• 配置你的打包工具（webpack、vue-cli、create-react-app等），将redux纳入babel的编译范围，以webpack为例：

// webpack.config.js 中babel-loader的配置修改
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        // 只排除除了redux之外的node_modules内容
        exclude: /node_modules\/(?!(redux)\/).*/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@babel/plugin-transform-block-scoped-functions']
          }
        }
      }
    ]
  }
}

• 该插件会自动把块内的函数声明转换为函数表达式，绕过Safari 9/10的语法限制。

3. 生产构建临时验证 #

违规代码被包裹在process.env.NODE_ENV !== 'production'的条件判断中，生产环境构建时这段代码会被自动摇树剔除。如果仅开发环境遇到报错，可以先打生产包验证业务功能正常，再逐步处理开发环境的兼容问题。

该问题属于JS语法解析层面的兼容缺陷，不存在可以直接修复的polyfill，只能通过升级依赖或者语法编译的方式解决。

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