Question

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

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

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

第2步-测试应用
npm start
通过将清单加载到Outlook中来实现侧面加载加载项
点击按钮
如果一切顺利，您应该会看到“欢迎”屏幕。

第3步-构建
npm运行构建

第4步-上传并测试
将dist文件夹的内容上传到在线Web服务器上的某个位置
将清单中的https://localhost:3000替换为Web服务器上的位置
通过将更新的清单加载到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: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    },

执行后者将导致Webpack将React加载到分发包中。

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

1 个答案: