node.js – office-js outlook-web-addins Webpack Production

我是NodeJS,Webpack的新手,特别是Outlook Addin.所以,我使用 https://docs.microsoft.com/en-us/outlook/add-ins/addin-tutorial的基本教程创建了我的Outlook Addin,一切顺利.

然而,当涉及到生产部署时,我挣扎了很多.我将所有代码都放在Production(Ubuntu实例)上.首先在Port：8080上测试了一个简单的NodeJS“hello World”应用程序,它运行得很好.然后我尝试启动我的Outlook Addin,就像我在本地做的那样,它从端口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'
});

加载项的内容

在构建时从项目生成的文件应该至少是一些JavaScript,然后可能是HTML和一些CSS,具体取决于您正在构建的加载项类型.最常见的可能是建立一个add-in with a task pane – 这基本上是一个网页.无论如何,构建的文件不是Node.js Web服务器.

托管您的加载项

在Outlook或Office中提供加载项需要您在某处托管文件.它可以通过任何Web服务器完成 – 一个简单的python Web服务器,Apache,Node.js HTTP服务器或类似的东西.它可以在localhost或其他托管服务中完成.加载项教程向您展示如何在编码时运行Webpack开发服务器来托管https://localhost:3000上的文件(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.生成的那些文件需要托管在某处.我在Amazon S3上托管了我的加载项,这是另一种托管文件的方式.

要在localhost上模拟它,请按照下列步骤操作.

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

>运行npm install http-server -g
>运行http-server dist /

工具

澄清这些工具的用途：

> Webpack将您的应用程序放在一起,从源代码到可以在浏览器上下文中运行的捆绑版本. Webpack开发服务器可用于在开发期间托管localhost上的文件> Node.js HTTP服务器也可用于托管localhost上的文件> pm2是Node.js的流程管理器.您可以使用它在生产中托管Node.js服务器