node.js - office-js + outlook-web-addins + Webpack + 生产

Question

我是 NodeJS、Webpack 的新手，尤其是 Outlook 插件。因此，我使用 https://learn.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 的引用不起作用，抛出 undefined 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，具体取决于您正在构建的加载项类型。最常见的可能是构建一个 add-in with a task pane - 这基本上是一个网页。在任何情况下，构建的文件都不是 Node.js Web 服务器。

托管您的插件

要使您的加载项在 Outlook 或 Office 中可用，您需要将文件托管在某个地方。它可以通过任何网络服务器完成——一个简单的 python 网络服务器、Apache、Node.js HTTP 服务器或任何类似的东西。它可以在本地主机或其他一些托管服务中完成。插件教程向您展示了如何运行 Webpack 开发服务器来托管 https://localhost:3000 上的文件。在您编码时 (npm run start)。

在您的 manifest.xml 文件中，您会注意到您指定了托管文件的地址。在我的开发设置中，对于带有任务 Pane 的加载项，我已指定文件托管在本地主机上，如下所示:

<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 开发服务器可用于在开发期间在本地主机上托管文件
• Node.js HTTP 服务器也可用于在您的本地主机上托管文件
• pm2 是 Node.js 的进程管理器。您可以使用它在生产环境中托管 Node.js 服务器