基于TypeScript+React的Office Web加载项IE11兼容性问题求助

一、修复ES6+语法兼容问题（箭头函数报错） #

当前Babel仅配置了TypeScript转译，未处理ES6+语法到ES5的降级，导致不支持现代语法的浏览器（IE11、旧版Safari）报错。需调整Babel配置引入环境兼容预设：

1. 更新babel.config.json，添加@babel/preset-env并配置目标浏览器与polyfill规则：

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

• targets指定需兼容的浏览器版本，可按需调整Safari版本号
• useBuiltIns: "usage"会自动根据代码使用情况引入core-js的polyfill，无需手动全局导入
• corejs需与项目安装的core-js版本一致（建议安装3.x版本）

2. 简化webpack.config.js中的babel-loader配置，无需重复指定presets（已在babel.config.json中全局配置）：

{
  test: /\.(ts|tsx)$/, // 若使用.tsx编写React组件，需添加tsx后缀匹配
  exclude: /node_modules/,
  use: "babel-loader"
}

二、修复Office.js初始化问题 #

报错提示Office.js未完全加载，需确保代码在Office.js初始化完成后再执行渲染逻辑：

1. 在React入口文件（如taskpane.tsx）中，将组件渲染逻辑包裹在Office.onReady()回调内：

import React from 'react';
import ReactDOM from 'react-dom/client'; // 若使用React 18+，需改用createRoot
import App from './App';

Office.onReady((info) => {
  if (info.host === Office.HostType.Outlook) {
    // React 17及以下写法
    // ReactDOM.render(<App />, document.getElementById('container'));
    
    // React 18写法
    const root = ReactDOM.createRoot(document.getElementById('container')!);
    root.render(<App />);
  }
});

2. 检查taskpane.html中的Office.js引入顺序，确保其在其他脚本之前加载，且不添加async/defer属性：

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<!-- 其他脚本（如bundle.js）放在Office.js之后 -->

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