office-js + outlook-web-addins + веб-пакет + производство - PullRequest
0 голосов
/ 14 февраля 2019

Я совершенно новичок в NodeJS, Webpack и особенно в Outlook Addin.Итак, я создал свой Outlook Addin, используя базовые учебные пособия из https://docs.microsoft.com/en-us/outlook/add-ins/addin-tutorial,, все прошло хорошо.

Однако, когда дело дошло до развертывания в Production, я много боролся.Я поместил весь свой код на производство (экземпляр Ubuntu).Сначала протестировал простое приложение NodeJS "Hello World" на Port: 8080, и оно работало просто отлично.Затем я попытался запустить свой Outlook Addin, так же, как я делал это локально, он запускался на порту 3000, но мне нужно было запустить его на 8080 и в фоновом режиме.Итак, я использовал «PM2», и вот идет «WALL».

  • pm2, запуск src / index.js не работает для меня, так как внутри Office.onReady или любой другой ссылки наOffice не работает, выдает неопределенная ошибка Office .

Я попытался выполнить сборку сценария 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'
});

Ответы [ 2 ]

0 голосов
/ 15 марта 2019

@ Шахрун и я вместе работаем над этим вопросом.Мы до сих пор не можем заставить вещи работать, и теперь заплатили за поддержку с Microsoft.К сожалению и разочарованию, Microsoft даже не признала нашу заявку в службу поддержки, и прошло уже 3 дня.

0 голосов
/ 21 февраля 2019

Содержимое надстройки

Файлы, которые генерируются из вашего проекта при сборке, должны содержать, по крайней мере, немного JavaScript, затем, возможно, HTML и немного CSS, в зависимости от того, какую надстройку вы используете.строительство.Наиболее распространенным является, вероятно, создание надстройки с панелью задач , которая в основном представляет собой веб-страницу.В любом случае, встроенные файлы не являются веб-сервером Node.js.

Размещение надстройки

Чтобы сделать надстройку доступной в Outlook или Office, необходимо где-то разместить файлы.Это можно сделать с любым веб-сервером - простым веб-сервером Python, сервером Apache, HTTP-сервером Node.js или чем-то подобным.Это можно сделать на локальном хосте или в другом хостинге.В руководстве по надстройке показано, как запустить сервер разработки Webpack для размещения файлов на https://localhost:3000 во время кодирования (npm run start).

В вашем файле manifest.xml выобратите внимание, что вы указываете адрес, где хранятся ваши файлы.В моей настройке разработки для надстройки с областью задач я указал, что файлы размещаются на локальном хосте, например:

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

Production

Однако при запускеваше приложение в работе, учебник говорит, что вы должны сделать 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 на производстве
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...