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

Question

在将应用程序放到网上后，就不再承认服务器的反应了。在当地一切都很好。

为了确保这不是我的错，我从零开始执行以下步骤。

步骤1-创建应用程序：

mkdir反应最

cd反应

办公室

使用React框架选择Office外接程序项目

把它命名为ReactTest

选择outlook作为office客户端

让它做吧--这是工作

cd ReactTest

npm审计修复

通过填写SupportUrl DefaultValue来调整清单

步骤2-测试应用程序

npm启动

通过将清单加载到Outlook中，旁瓣外接程序

单击按钮

如果一切顺利，你应该看到欢迎屏幕。

步骤3-构建

npm运行构建

步骤4-上传和测试

将“dist”文件夹的内容上载到联机the服务器上的某个位置

将清单中的https://localhost:3000替换为the服务器上的位置

通过将更新的清单加载到Outlook中，旁瓣外接程序

单击按钮

没有任何迹象显示在西德帕内尔

步骤5-在outlook调试器中签入

右键单击sidepanel并显示元素检查器。

检查控制台是否有错误

它显示了3个错误()，其中最大的错误似乎是未知的反应并导致外接程序不工作的。

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

反应和反应-明显存在。

我希望这个应用程序能在我们的the服务器上运行，这种反应是可用的，也是可行的。

Answer 1

这是因为webpack配置的生产建设标志反应和ReactDOM作为外部。您可以在HTML页面中显式加载脚本链接，或者转到/config/webpack.prod.js并删除外部部分：

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

做后一件事，会使webpack的负载反应成捆。