IE11运行Office Web Add-In报SCRIPT1010预期标识符错误求排查建议

问题核心原因 #

你遇到的SCRIPT1010: Expected identifier错误直接指向isClean前的{符号，本质是IE11完全不支持ES6的对象解构赋值语法。你的编译配置没有把项目依赖中包含的ES6语法转译为IE11兼容的ES5语法，导致打包产物中保留了IE11无法识别的语法，最终加载失败。

排查与修复步骤 #

• 修正Babel配置
  你当前的babel.config.json仅配置了@babel/preset-typescript，该预设仅负责TypeScript到JavaScript的语法转换，不会处理ES版本降级。需要补充@babel/preset-env并指定兼容IE11，配置参考如下：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "ie": "11"
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }],
    "@babel/preset-typescript",
    "@babel/preset-react"
  ]
}

同步安装缺失的依赖包：@babel/preset-env、@babel/preset-react，注意core-js版本要和配置中指定的版本一致。

• 调整webpack的babel-loader转译范围
  默认配置下babel-loader不会转译node_modules目录下的第三方依赖，但很多npm包发布时并不会提前转译为ES5，你需要修改babel-loader的规则，放开对node_modules的全量排除，或者仅指定需要转译的第三方包：

// webpack.config.js 中处理ts/tsx的rule配置参考
module: {
  rules: [
    {
      test: /\.(ts|tsx|js|jsx)$/,
      // 不要全量排除node_modules，或者仅排除确定兼容ES5的包
      exclude: /node_modules\/(?!(需要转译的包名1|需要转译的包名2)\/).*/,
      use: 'babel-loader'
    }
  ]
}

可以先临时删除exclude: /node_modules/配置打包测试，如果报错消失即可确认是第三方依赖未转译导致的问题，后续再调整排除范围减少打包耗时。

• 验证修复效果
  你可以先手动修改打包后的产物，把报错位置的{isClean:a}=r("zomH")替换为a=r("zomH").isClean，如果修改后IE11不再抛出该错误，即可确认问题根因，再按上述步骤调整配置即可。

• 其他兼容检查
  确认你项目中用到的let、箭头函数、扩展运算符等ES6语法都被Babel正确转译，IE11对所有ES6+语法的支持都存在缺陷，需要全部降级为ES5语法。

内容的提问来源于stack exchange，提问作者Isaac N.