如何将使用 Yo Office 创建的 outlook 加载项部署到我们自己的 ubuntu 服务器？

Question

将应用程序放到在线网络服务器上后，React 不再被识别。在本地一切正常。

为了确定这不是我的错，我通过执行以下步骤再次从头开始。

第 1 步 - 创建应用程序：
mkdir 反应测试
cd 反应测试
哟办公室
select 使用 React 框架的 Office 插件项目
将其命名为 ReactTest
select outlook as the office 客户端
让它发挥作用
cd ReactTest
npm 审计修复
通过填写 SupportUrl DefaultValue

来调整清单

第 2 步 - 测试应用程序
npm 开始
通过将清单加载到 Outlook
来旁加载加载项点击按钮
如果一切顺利，您应该会看到欢迎屏幕。

步骤 3 - 构建
npm 运行构建

第 4 步 - 上传和测试
将 dist 文件夹的内容上传到在线网络服务器上的某个位置
将清单中的 https://localhost:3000 替换为网络服务器上的位置
通过将更新的清单加载到 Outlook
来旁加载加载项点击按钮
侧面板中没有任何显示

步骤 5 - 签入 outlook 调试器
右键单击侧面板并显示元素检查器
检查控制台错误
它显示 3 个错误其中最大的错误似乎是 React 未知并导致加载项无法工作?

[Error] ReferenceError: Can't find variable: React
    react (vendor.297c97ec99bb1c2af14d.js:16:1502)
    o (vendor.297c97ec99bb1c2af14d.js:1:159)
    (anonieme functie) (vendor.297c97ec99bb1c2af14d.js:16:1336)
    o (vendor.297c97ec99bb1c2af14d.js:1:159)
    (anonieme functie) (vendor.297c97ec99bb1c2af14d.js:1:949)
    Globale code (vendor.297c97ec99bb1c2af14d.js:1:957)

[Error] ReferenceError: Can't find variable: React
    react (app.297c97ec99bb1c2af14d.js:23:8683)
    o (app.297c97ec99bb1c2af14d.js:1:159)
    ./index.tsx (app.297c97ec99bb1c2af14d.js:23:7746)
    o (app.297c97ec99bb1c2af14d.js:1:159)
    (anonieme functie) (app.297c97ec99bb1c2af14d.js:23:8631)
    o (app.297c97ec99bb1c2af14d.js:1:159)
    (anonieme functie) (app.297c97ec99bb1c2af14d.js:1:949)
    Globale code (app.297c97ec99bb1c2af14d.js:1:957)

[Error] Error: Office.js has not fully loaded. Your app must call "Office.onReady()" as part of it's loading sequence (or set the "Office.initialize" function). If your app has this functionality, try reloading this page.
    (anonieme functie) (office.debug.js:1643:263)
    validateFunction (office.debug.js:287)

这些是package.json中的依赖项（如果我理解正确的话，在生产中使用）

"dependencies": {
    "@microsoft/office-js-helpers": "^1.0.2",
    "core-js": "^2.6.1",
    "office-ui-fabric-react": "^6.138.1",
    "react": "^16.8.1",
    "react-dom": "^16.8.1"
},

react 和 react-dom 明显存在

我希望该应用程序能够运行在我们的网络服务器上，并且 React 可用且有效。

Answer 1

这是因为生产构建的 webpack 配置将 React 和 ReactDOM 标记为外部。您可以使用 HTML 页面中的脚本链接显式加载它们，或者转到 /config/webpack.prod.js 并删除外部部分：

  externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    },

执行后者会导致 webpack 将 React 加载到包中。

如何将使用 Yo Office 创建的 outlook 加载项部署到我们自己的 ubuntu 服务器？

How do I deploy an outlook add-in created with Yo Office to our own ubuntu server?

office-addins