"Object.defineProperty(exports, "__esModule", { value: true });"在 FunctionFile 中阻止函数执行

Question

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

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

这行代码由 Typescript Compiler 生成，在本例中，用于加载 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();
}

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. 状态栏显示“[add-in name] is working on your [function name]”并保持不变，我相信该函数被调用但不是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'条目也需要包含在块中。 我的 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 托管的用于 Office Web 插件的 React&Typescript 项目中有一些函数文件示例，因为详细配置与普通的 NodeJS + JavaScript 项目确实不同。