“Object.defineProperty（导出，“__esModule”，{值：true}）；“ 阻止 FunctionFile 中的函数执行

Question

我按照本教程启动了一个带有 Typescript&React 的 Office Web 插件项目：https://github.com/OfficeDev/office-js-docs-pr/blob/master/docs/includes/file-get-started-excel-反应.md。任何任务窗格函数和页面都可以正常运行，但函数文件页面上的函数无法正确执行。

通过删除代码，我发现Object.defineProperty(exports, "__esModule", { value: true });编译后的 function-file.js 中的一行解决了问题。每当它出现时，文件中的任何函数都不会被执行。Fiddler 显示脚本已正确加载到 Excel 中，且没有任何警告。状态栏显示“[加载项名称]正在处理您的[功能名称]”。

这行代码是由 Typescript 编译器生成的，在本例中，用于加载节点模块“@microsoft/office-js-helpers”。我尝试修改 tsconfig.json 文件以避免生成该行，但随后“@microsoft/office-js-helpers”的导入失败。另外，Webpack 4 将在该文件中添加 webpackBootstrap 代码拦截功能。此时，我只能避免在 function-file.ts 中进行任何导入，并在通过 Webpack 构建项目后执行“tsc”。

我的问题是：设置该项目的正确方法是什么，以便 function-file.js 不包含任何阻止其函数执行的代码？如果没有明确的答案，至少，为什么这行代码会导致其他页面工作正常的问题？

以下是我的 tsconfig.json ，它可以避免该行但无法加载任何模块：

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

我手动将编译后的function-file.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 中的函数方面取得了一些进展。我希望我获得这项工作的道路能够帮助其他与我一样遭受同样痛苦的人，并且仍然在这个项目上遭受同样的痛苦。

首先，一旦我让 function-file.js 正常工作，我注意到当函数不起作用时有两种不同的行为：

1. 状态栏显示“[加载项名称]正在处理您的[函数名称]”并保持不变，我相信该函数已被调用，但不是无法event.completed()访问的行；

2. 状态栏闪烁相同的消息并变为空白，这表明甚至没有找到该功能。

如果有更好的方法来诊断此文件，请纠正我。

原始 Yeoman 生成的 function-file.html Webpack 配置如下所示：

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

为了使用任何模块，“供应商”（对于我的自定义模块来说不是必需的，但“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，部分功能仍然无法使用。我测试了我的自定义模块，它们工作正常。

我真的希望在 Office Web Add-in 的 NodeJS 托管 React&Typescript 项目上有一些函数文件示例，因为详细配置与普通 NodeJS + JavaScript 项目确实不同。