"Object.defineProperty (exports," __esModule ", {value: true});" блокирует выполнение функций в FunctionFile

Question

Я запустил надстройку Office Web с проектом Typescript & React, следуя этому руководству: https://github.com/OfficeDev/office-js-docs-pr/blob/master/docs/includes/file-get-started-excel-react.md. Любая функция и страница панели задач работают правильно, но функции на странице файла функций не могут быть выполнены должным образом.

Удалив код, я обнаружил, что Object.defineProperty(exports, "__esModule", { value: true }); - это одна из строк в скомпилированном файле-функции.js, которая решает проблему. Всякий раз, когда он представляет, любая функция в файле не будет выполняться. Fiddler показывает, что скрипт правильно загружен в Excel без предупреждения. В строке состояния отображается «[имя надстройки] работает над [именем функции]».

Эта строка кода генерируется компилятором Typescript, в данном случае, для загрузки модуля Node '@ microsoft / office-js-helpers'. Я попытался изменить файл tsconfig.json, чтобы избежать генерации этой строки, но тогда импорт '@ microsoft / office-js-helpers' завершился неудачно. Кроме того, Webpack 4 добавит в этот файл функции блокировки кода webpackBootstrap. На данный момент я могу только избежать импорта в function-file.ts и выполнить команду 'tsc' после сборки проекта с помощью Webpack.

Мой вопрос: как правильно настроить этот проект, чтобы функция-file.js не содержала кода, блокирующего выполнение его функций? Если нет четкого ответа, по крайней мере, почему эта строка кода вызывает проблемы, когда другие страницы работают нормально?

Ниже приведен мой tsconfig.json, который может обойти эту строку, но не может загрузить какой-либо модуль:

  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": ["es2015", "dom"],
    "typeRoots": ["node_modules/@types"]
  },

Я вручную редактирую скомпилированный файл-функции.js в двух версиях:

Object.defineProperty(exports, "__esModule", { value: true });
(function () {
    Office.initialize = function () { }
    };
})();
function writeText(event) {
    Office.context.document.setSelectedDataAsync('test');
    event.completed();
}

VS

(function () {
    Office.initialize = function () { }
    };
})();
function writeText(event) {
    Office.context.document.setSelectedDataAsync('test');
    event.completed();
}

У первого эта проблема, а у второго нет.

Answer 1

С некоторыми советами от моего коллеги, который работал на JavaScript во время ланча, я добился некоторого прогресса в вызове функций в function-file.ts. Я бы хотел, чтобы мой путь к этой работе помог другим людям, страдающим от той же боли, что и я, и до сих пор в этом проекте.

Прежде всего, как только я получил, что функция file.js работает должным образом, я заметил, что есть две разные ситуации, когда функция не работает:

1. строка состояния показывает, что «[имя надстройки] работает с вашим [именем функции]» и остается с ним, я считаю, что функция вызывается, но не может быть достигнута строка event.completed();

2. строка состояния мигает тем же сообщением и становится пустой, что указывает на то, что функция даже не была найдена.

Пожалуйста, исправьте меня, если есть лучший способ диагностики этого файла.

Оригинальная сгенерированная Yeoman конфигурация Webpack для function-file.html выглядит примерно так:

new HtmlWebpackPlugin({
        title: 'demo',
        filename: 'function-file/function-file.html',
        template: '../function-file/function-file.html',
        chunks: ['function-file']
}),

Чтобы использовать какой-либо модуль, запись «vendor» (не требуется для моих пользовательских модулей, но требуется для «office-js-helpers»?) И запись «polyfills» также должны быть включены в чанки. Моя конфигурация Webpack 4:

new HtmlWebpackPlugin({
  title: "demo",
  filename: "function-file/function-file.html",
  template: "../function-file/function-file.html",
  chunks: ["babel-polyfill", "function-file/function-file"]
}),

Последний шаг - убедиться, что функции, объявленные в function-file.ts, можно найти: попросить Webpack экспортировать глобальные функции в function-file.ts, в чем я до сих пор не уверен, взламываю ли я разработку Typescript или все нормально. Пример функции-file.ts:

import * as OfficeHelpers from '@microsoft/office-js-helpers';
(() => {
  Office.initialize = () => {};
})();

declare global {
  namespace NodeJS {
    interface Global {
      writeText: (event: Office.AddinCommands.Event) => void;
    }
  }
}

global.writeText = (event: Office.AddinCommands.Event) => {
  Office.context.document.setSelectedDataAsync('test');
  event.completed();
};

Обратите внимание: даже office-js-helpers импортированы, некоторые функции все еще не работают. Я проверил свои пользовательские модули, они работают правильно.

Мне бы очень хотелось, чтобы в размещенном на NodeJS проекте React & Typescript для веб-надстройки Office было несколько примеров функциональных файлов, поскольку детальная конфигурация действительно отличается от обычного проекта NodeJS + JavaScript.