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

Question

我对NodeJS，Webpack尤其是Outlook Addin完全陌生。因此，我使用来自https://docs.microsoft.com/zh-cn/outlook/add-ins/addin-tutorial的基本教程创建了Outlook Addin ，一切顺利。

但是，在生产环境上部署时，我很费劲。我将所有代码放在Production（Ubuntu实例）上。首先在端口：8080上测试了一个简单的NodeJS“ hello World”应用程序，它运行良好。然后，我尝试启动Outlook Addin，就像在本地一样，它从端口3000开始，但是我需要在8080和后台运行它。因此，我使用了“ PM2”，然后是“ WALL”。

• pm2 start src / index.js对我不起作用，因为内部Office.onReady或对Office的任何其他引用均不起作用，会引发未定义的Office错误。

我尝试了pm2 run-script构建（在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 服务器或任何类似的服务器。它可以在本地主机或其他托管服务中完成。插件教程向您展示如何在编码时运行 Webpack 开发服务器以在https://localhost:3000npm run start上托管文件 ( )。

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

<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 服务器