office-js + Outlook-web-addins + Webpack + 生產

Question

我對 NodeJS、Webpack 尤其是 Outlook 插件完全陌生。 因此，我使用https://docs.microsoft.com/en-us/outlook/add-ins/addin-tutorial 中的基本教程創建了我的 Outlook 插件，一切順利。

然而，當涉及到生產部署時，我遇到了很多困難。 我把我所有的代碼放在生產（Ubuntu 實例）上。 首先在端口：8080 上測試了一個簡單的 NodeJS“hello World”應用程序，它運行得很好。 然后我嘗試啟動我的 Outlook 插件，就像我在本地做的那樣，它在端口 3000 上啟動，但我需要在 8080 和后台運行它。 所以，我使用了“PM2”，這里是“WALL”。

• pm2 start src/index.js 對我不起作用，因為里面的 Office.onReady 或任何其他對 Office 的引用都不起作用，會引發未定義的 Office錯誤。

我嘗試了 pm2 run-script build，（在 package.json 和 webpack.prod.js 文件中修改后）

• 但是，當我嘗試運行pm2 start dist/app.bundle.js時仍然遇到同樣的錯誤

那么，請指導我在使用 pm2 start {filename/path} 時應該參考哪個文件？

這是我正在使用的一些配置，webpack.common.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        polyfill: 'babel-polyfill',
        app: './src/index.js',
        'function-file': './function-file/function-file.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: 'html-loader'
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Production'
        }),
        new HtmlWebpackPlugin({
            template: './index.html',
            chunks: ['polyfill', 'app']
        }),
        new HtmlWebpackPlugin({
            template: './function-file/function-file.html',
            filename: 'function-file/function-file.html',
            chunks: ['function-file']
        }),
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

webpack.prod.js

 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
   mode: 'production',
   devtool: 'source-map'
});

Answer 1

加載項的內容

構建時從您的項目生成的文件至少應該是一些 JavaScript，然后可能是 HTML 和一些 CSS，具體取決於您正在構建的加載項類型。 最常見的可能是構建帶有任務窗格的加載項- 這基本上是一個網頁。 在任何情況下，構建的文件都不是 Node.js Web 服務器。

托管您的加載項

使加載項在 Outlook 或 Office 中可用需要您將文件托管在某處。 它可以通過任何 Web 服務器來完成——一個簡單的 Python Web 服務器、Apache、Node.js HTTP 服務器或任何類似的東西。 它可以在本地主機或其他托管服務中完成。 插件教程向您展示了如何在編碼 ( npm run start ) 時運行 Webpack 開發服務器以在https://localhost:3000上托管文件。

在 manifest.xml 文件中，您會注意到您指定了托管文件的地址。 在我的開發設置中，對於帶有任務窗格的加載項，我已指定文件托管在 localhost 上，如下所示：

<FormSettings>
  <Form xsi:type="ItemRead">
    <DesktopSettings>
      <SourceLocation DefaultValue="https://localhost:3000/index.html"/>
      <RequestedHeight>250</RequestedHeight>
    </DesktopSettings>
  </Form>
</FormSettings>

生產

但是，在生產中運行您的應用程序時，教程說您應該執行npm run build 。 生成的那些文件需要托管在某個地方。 我在 Amazon S3 上托管了我的加載項，這是托管文件的另一種方式。

要在本地主機上模擬它，請按照以下步驟操作。

在與您的項目相同的文件夾中（ dist/ 文件夾所在的位置）：

1. 運行npm install http-server -g
2. 運行http-server dist/

工具

澄清這些工具的用途：

• Webpack 將您的應用程序組合在一起，從源代碼到可以在瀏覽器上下文中運行的捆綁版本。 Webpack 開發服務器可用於在開發過程中在 localhost 上托管文件
• Node.js HTTP 服務器也可用於在本地主機上托管文件
• pm2 是 Node.js 的進程管理器。 您可以使用它在生產中托管 Node.js 服務器

Answer 2

@shahroon 和我一起解決這個問題。 我們仍然無法正常工作，現在已經支付了 Microsoft 的支持費用。 可悲且非常令人沮喪的是，Microsoft 甚至沒有承認我們的支持請求，而且已經 3 天了。