如何将使用Yo Office创建的Outlook外接程序部署到我们自己的ubuntu服务器？

Question

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

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

第1步 - 创建应用程序： mkdir reacttest cd reacttest 哟办公室 使用React框架选择Office加载项项目 将其命名为ReactTest 选择outlook作为办公室客户 让它做它的工作 cd ReactTest npm审核修复 通过填写SupportUrl DefaultValue来调整清单

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

第3步 - 构建 npm run build

第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"
},

反应和反应明显存在

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

Answer 1

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

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

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