node.js - "Object.defineProperty(exports, "__esModule ", { value: true });"阻止函数文件中的函数执行

Question

我按照本教程启动了一个带有 Typescript 和 React 项目的 Office Web 插件:https://github.com/OfficeDev/office-js-docs-pr/blob/master/docs/includes/file-get-started-excel-react.md .任何taskpane功能和页面都能正常运行，但是function-file页面上的功能无法正常执行。

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

这行代码由 Typescript 编译器生成，在本例中，用于加载 Node 模块“@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();
}

对比

(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']
}),

为了使用任何模块，“vendor”(我的自定义模块不是必需的，但“office-js-helpers”需要？)和“polyfills”条目也需要包含在 block 中。我的 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 开发还是做得很好。示例函数文件.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 托管的 Office Web 插件的 React&Typescript 项目上有一些功能文件示例，因为详细配置与普通的 NodeJS + JavaScript 项目真的不同。