5

我按照本教程开始了一个带有 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 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();
}

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

4

1 回答 1

2

在一次午餐谈话中，我的同事曾经在 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 项目确实不同。

于 2019-01-15T23:37:02.363 回答