基于SP-PnP-JS开发Outlook加载项对接本地SharePoint及IE11问题求助

项目初始搭建背景 #

• 开发目标：实现可对接三类SharePoint环境的Outlook现代加载项，覆盖SharePoint 2016本地部署、SharePoint 2019本地部署、SharePoint Online场景，最终适配Outlook 2019客户端运行环境，计划全量使用SP-PnP-JS实现SharePoint连接逻辑。
• 初始项目创建：通过Yeoman生成器创建React技术栈项目，执行命令为yo office --projectType react --name "Outlook AddIn" --host outlook --ts true，项目侧载到Outlook桌面客户端、OWA环境均可正常启动运行。
• 依赖安装：通过npm命令安装SP-PnP-JS全量依赖，执行命令为npm install @pnp/logging @pnp/common @pnp/odata @pnp/sp @pnp/nodejs --save。

前期调试与重构过程 #

• 依赖安装完成后，参考SP-PnP-JS官方文档的上下文建立示例逐一测试连接逻辑，同时尝试使用sp-addinhelpers模块实现连接适配，经多日调试仍无法成功获取SharePoint上下文。
• 2021/04/11迭代调整：放弃原Yeoman生成项目，新建纯ReactJS项目，保留SP-PnP-JS依赖安装逻辑，直接从Office官方CDN引入office.js文件，核心taskpane.html代码如下：

<!doctype html>
<html lang="en" data-framework="javascript">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=11" />
    <link rel="icon" href="/favicon.ico" />
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="logo192.png" />
    <title>Outlook Add-In</title>
    <link href="<sharepoint-tenant>/SiteAssets/office-addin/static/css/2.486e1214.chunk.css" rel="stylesheet">
    <link href="<sharepoint-tenant>/SiteAssets/office-addin/static/css/main.d5778436.chunk.css" rel="stylesheet">
</head>

• 重构后验证：将编译后的静态文件上传到SharePoint环境后，SharePoint连接逻辑、全量SharePoint操作均可正常执行。Office初始化核心代码如下：

import "office-ui-fabric-react/dist/css/fabric.min.css";
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Taskpane from './Taskpane';
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
/* global Component, document, Office, module, require, Taskpane */

console.log("initializing...")
Office.initialize = function(reason) {console.log(reason)};
Office.onReady(function() {
  console.log("Office ready!");
  initializeIcons();
  ReactDOM.render(<Taskpane />, document.getElementById("root"));
});

当前遗留核心问题 #

• 兼容性报错：在IE11运行环境下，执行Office.initialize代码行时抛出报错SCRIPT5009: 'Office' is undefined。
• 运行异常：Outlook桌面客户端依赖IE11引擎渲染任务窗格，上述报错最终导致任务窗格呈现空白状态。
• 待解技术疑问：
  • SP-PnP-JS是否适配Office加载项运行场景
  • 本地部署版SharePoint环境下，SP-PnP-JS的可用连接实现方案是什么，是否有可替代的REST、JSOM适配方案

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