ide - 适用于 Office JS Excel 插件的首选 IDE

Question

我正在尝试使用 Microsoft JS API 为 Excel 开发加载项。我读过 Michael Zlatkovsy 写的关于使用 Office.JS 构建办公室插件的书。但这是一个非常陡峭的学习曲线(对 VB 6、C、C# 和 Java 有一定的了解。
这里的问题是我不知道开发插件的最佳方法是什么？

是 Visual Studio 2017

带有 Yo-man 生成器的 Visual Studio Code？

我试图通过他书中提到的电子邮件地址与 Michael Zlatkovsky 联系，但遗憾的是我没有得到回复，并且在 Microsoft docs他们只是说明了 2 个选项，但没有提到 Visual Studio 项目不在 TypeScript 中的事实，如果将其转换为 TypeScript，则只会调试生成的 JavaScript，无法让调试器直接在TypeScript 代码应该如此。

来自调试器的错误消息通常也不是很精确。
因此，任何以最简单的方式开发加载项的建议将不胜感激。我从来没有比使用 Office JS 方法需要这么多时间来学习一项新技术。

提前谢谢了，

Answer 1

很好的问题。
创建 Office.js 加载项——或者甚至只是一般的现代网站，而 Office.js 加载项实际上只是一个网站加上一个 list ——肯定比创建 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 加载项相当容易，至少对于常规任务 Pane 加载项而言(自定义功能是另一回事，为此您可能仍希望保留“yo office”结构和脚本)。
如果您有兴趣沿着 create-react-app 路线和 Office.js-ify 它，这里是步骤:

Start with the CRA instructions, choosing the TypeScript option (more info at https://create-react-app.dev/docs/adding-typescript)

On top of what it generates, you can go ahead and add Fabric React (for UI) as well as any other libraries. If you want to see what Script Lab uses, see https://github.com/OfficeDev/script-lab/blob/master/packages/editor/package.json, though it might be a tad overwhelming. The most useful super-simple library that's great "bang for the buck" is styled-components, which makes it easier to write your UI by essentially letting you in-line CSS into your JS/React in a very easy way. Script Lab also makes use of Redux and related libraries (typesafe-actions, redux-saga, reselect) which are useful once they are set up, but they might be a overkill for you (esp. if you are learning this as you go). So for now, I would stick with just the basic typescriptified create-react-app + Fabric React + optionally styled components, and call that good.

Once you have a functional website, how do you go from website to add-in? Well, first of all, you add a CDN reference to Office.js (see https://docs.microsoft.com/en-us/office/dev/add-ins/develop/referencing-the-javascript-api-for-office-library-from-its-cdn). Note that even though the rest of your project will be modern modular javascript (and hence import statements, etc.), for the Office.js reference, you'll use a script tag. You'll also want to "npm install --save-dev @types/office-js" to get the latest TypeScript definitions for Office. And speaking of JS, somewhere in your bootstrapping logic (e.g., whatever wraps ReactDOM.render), add a call to "Office.onReady()" -- see https://docs.microsoft.com/en-us/office/dev/add-ins/develop/understanding-the-javascript-api-for-office#initialize-with-officeonready for more info.

Note that when you add the "Office.onReady", you may run into a compile-time issue complaining about "no-undef". As a workaround, just put the comment "/* global Excel, Office */" into the JS file that it complains about, and things will magically work. (More info here: https://github.com/OfficeDev/office-js-docs-pr/issues/691)

Next, you will need to create/add an Office manifest (an xml file describing the URL of your site, the ribbon button arrangement, etc). The file is somewhat cumbersome to work with, but the good news is that you don't need to touch it too often. You can use a similar file to what yo office generates, adjusting paths (e.g., to images) as necessary. You'll likely end up with two or more manifests, one for localhost and one for your production environment... but you can start with just your localhost.

Once you've authored the manifest, you will want to sideload it into Office. For desktop, use the instructions at https://docs.microsoft.com/en-us/office/dev/add-ins/testing/create-a-network-shared-folder-catalog-for-task-pane-and-content-add-ins. For Office Online, use https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-office-add-ins-for-testing. For Mac, use the instructions at https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-an-office-add-in-on-ipad-and-mac. If it fails to load, it means that you have an issue in the manifest, which happens all the time -- it's a very picky format. In that case, see the troubleshooting steps at https://docs.microsoft.com/en-us/office/dev/add-ins/testing/troubleshoot-manifest.

附带说明一下，我很惊讶(也很遗憾)您试图通过电子邮件与我联系但没有得到回复。我不记得看到过一封电子邮件——如果我愿意，我会回答它(至少有一个简短的回复将你重定向到 StackOverflow :-))。这是我第一次听说没有收到电子邮件。也许再试一次？在接下来的几天里，我也会检查我的垃圾邮件文件夹，以确保您的新电子邮件没有出现在那里...
最好的事物!
~迈克尔