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“应用程序，它运行得很好。然后我尝试启动我的Outlook，就像我在本地做的一样，它是在3000端口上启动的，但是我需要在8080和后台运行它。所以，我用了"PM2"，这就是“墙”。

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

我尝试了pm2运行脚本构建，(在修改了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服务器、Apache、Node.js HTTP服务器或任何类似的东西。它可以在本地主机上或在其他托管服务中完成。外接程序教程向您展示了如何在编写代码( https://localhost:3000 )时运行Webpack开发服务器来承载npm run start上的文件。

在您的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。生成的文件需要托管在某个地方。我在亚马逊S3上托管了我的插件，这是另一种托管文件的方式。

要在localhost上模拟它，请执行以下步骤。

在与项目相同的文件夹中( dist/文件夹位于其中)：

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

工具

为了澄清这些工具的用途：

• Webpack将你的应用程序组合在一起，从你的源代码到可以在浏览器环境下运行的捆绑版本。在开发过程中，Webpack开发服务器可以用来在本地主机上托管文件。
• 还可以使用Node.js HTTP服务器在本地主机上承载文件。
• pm2是Node.js的流程管理器。您可以在生产中使用它来承载Node.js服务器。

Answer 2

@shahroon和我一起研究这个问题。我们仍然无法让事情工作，现在已经支付了微软的支持。可悲和令人沮丧的是，微软甚至没有承认我们的支持票，而且已经过了3天了。