Question

通过遵循本教程https://github.com/OfficeDev/office-js-docs-pr/blob/master/docs/includes/file-get-started-excel-react.md，我开始了一个带有Typescript＆React项目的Office Web加载项。任何任务窗格功能和页面均可正常运行，但功能文件页面上的功能无法正确执行。

通过删除代码，我发现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();
}

VS

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

第一个有这个问题，而第二个没有。

Answer 1

在午餐会上，我的同事曾经使用过JavaScript的一些提示使我在function-file.ts中调用函数取得了一些进展。我希望我获得这份工作的道路能够帮助其他人像我一样遭受同样的痛苦，并且仍然在这个项目上继续努力。

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

状态栏显示“ [附加名称]正在使用您的[函数名称]”并保持不变，我相信函数已被调用，但是event.completed()的行不能到达；
状态栏闪烁相同的消息并变为空白，这表明甚至找不到该功能。

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

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开发还是做得很好。样本function-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 Add-in项目的React＆Typescript项目上有一些功能文件示例，因为详细配置确实与普通的NodeJS + JavaScript项目不同。

“ Object.defineProperty（exports，” __esModule“，{value：true}）;”阻止FunctionFile

1 个答案: