g00*_*lex 6 ide exceljs office-js
我正在尝试使用 Microsoft JS API 为 Excel 开发加载项。我读过 Michael Zlatkovsy 写的关于使用 Office.JS 构建办公室插件的书。但这是一个非常陡峭的学习曲线（对 VB 6、C、C# 和 Java 有一些背景。这里的问题是我不知道哪种方法是开发插件的最佳方法？
我试图通过他书中提到的电子邮件地址与 Michael Zlatkovsky 联系，但遗憾的是我从未得到回复，并且在Microsoft 文档中他们只说明了 2 个选项，但他们没有提到 Visual Studio 项目不在 TypeScript 中的事实如果将其转换为 TypeScript，则只会调试生成的 JavaScript，无法让调试器直接在 TypeScript 代码上工作。
来自调试器的错误消息通常也不是很精确。因此，任何以最简单的方式开发加载项的建议将不胜感激。我从来没有比使用 Office JS 方法需要这么多时间来学习一项新技术。
提前谢谢了，
很好的问题。
创建 Office.js 加载项——或者甚至只是一般的现代网站，而 Office.js 加载项实际上只是一个网站加上一个清单——肯定比创建 VBA/VSTO 项目更复杂。因此，要设定期望，将会有一个学习曲线。
根据您对 Web 技术的熟悉程度——以及您是否愿意学习 React（如果您还不知道）——我绝对会建议您使用 Yo Office 或 Create React App。这两个都属于第二个阵营，使用某些东西（“yo”或 CRA）为您生成一个项目，您将在 VS Code 中使用该项目，而不是从 Visual 中的 Office 加载项项目模板开始Studio（在这一点上有点过时，并且不适合像 React 这样的现代 Web 技术）。但是，您仍将使用 Visual Studio 进行调试。体验不是 100% 无缝的，但也不错。例如，插件 Script Lab ( https://aka.ms/scriptlab ) 就是以这种方式开发的。
最后我检查了一下，“yo office”——即使你选择了“React”作为选项——仍然在创建自己的自定义项目，而不是利用 create-react-app 的结构。就个人而言，我更喜欢 CRA，因为它的项目结构和简化的依赖项和配置（无需管理 webpack 配置等）。将 CRA 应用程序转换为 Office 加载项相当容易，至少对于常规任务窗格加载项而言（自定义功能是另一回事，为此您可能仍希望保留“yo office”结构和脚本）。
如果您有兴趣沿着 create-react-app 路线和 Office.js-ify 它，这里是步骤：
从 CRA 说明开始，选择 TypeScript 选项（更多信息请访问https://create-react-app.dev/docs/adding-typescript）
在它生成的内容之上，您可以继续添加 Fabric React（用于 UI）以及任何其他库。如果您想查看 Script Lab 使用的内容，请参阅https://github.com/OfficeDev/script-lab/blob/master/packages/editor/package.json，虽然它可能有点压倒性。最有用的超级简单的库是“物超所值”的样式组件，它通过让您以非常简单的方式将 CSS 内嵌到 JS/React 中，从而使编写 UI 变得更加容易。Script Lab 还使用了 Redux 和相关库（typesafe-actions、redux-saga、reselect），这些库在设置后很有用，但它们对您来说可能是一种矫枉过正（特别是如果您正在学习这一点） . 所以现在，我会坚持使用基本的 typescriptified create-react-app + Fabric React + 可选样式的组件，并称其为好。
一旦你有了一个功能性的网站，你如何从网站到加载项？好吧，首先，您添加对 Office.js 的 CDN 引用（请参阅https://docs.microsoft.com/en-us/office/dev/add-ins/develop/referencing-the-javascript-api-for -office-library-from-its-cdn）。请注意，即使您的项目的其余部分将是现代模块化 javascript（因此导入语句等），对于 Office.js 参考，您将使用脚本标记。您还需要“npm install --save-dev @types/office-js”来获取 Office 的最新 TypeScript 定义。说到 JS，在你的引导逻辑中的某个地方（例如，任何包装 ReactDOM.render 的东西），添加一个对“Office.onReady()”的调用——见https://docs.microsoft.com/en-us/office/dev/add-ins/develop/understanding-the-javascript-api-for-office#initialize-with-officeonready了解更多信息。
请注意，当您添加“Office.onReady”时，您可能会遇到抱怨“no-undef”的编译时问题。作为一种解决方法，只需将注释“/* global Excel, Office */”放入它抱怨的 JS 文件中，事情就会神奇地起作用。（更多信息在这里：https : //github.com/OfficeDev/office-js-docs-pr/issues/691）
接下来，您将需要创建/添加一个 Office 清单（一个描述站点 URL、功能区按钮排列等的 xml 文件）。该文件处理起来有些麻烦，但好消息是您不需要经常接触它。您可以使用与 yo office 生成的文件类似的文件，根据需要调整路径（例如，到图像）。您最终可能会得到两个或多个清单，一个用于 localhost，另一个用于您的生产环境……但您可以只从您的 localhost 开始。
创建清单后，您将希望将其旁加载到 Office。对于桌面，请使用https://docs.microsoft.com/en-us/office/dev/add-ins/testing/create-a-network-shared-folder-catalog-for-task-pane-and 上的说明-内容插件。对于 Office Online，请使用https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-office-add-ins-for-testing。对于 Mac，请使用https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-an-office-add-in-on-ipad-and-mac 上的说明。如果它无法加载，则意味着清单中存在问题，这种情况一直在发生——这是一种非常挑剔的格式。在这种情况下，请参阅故障排除步骤https://docs.microsoft.com/en-us/office/dev/add-ins/testing/troubleshoot-manifest。
附带说明一下，我很惊讶（也很遗憾）您试图通过电子邮件与我联系但没有得到回复。我不记得看到过一封电子邮件——如果我愿意，我会回答它（至少有一个简短的回复将你重定向到 StackOverflow :-)）。这是我第一次听说没有收到电子邮件。也许再试一次？在接下来的几天里，我也会检查我的垃圾邮件文件夹，以确保您的新电子邮件没有出现在那里...
最好的事物！
~迈克尔