本文介绍如何使用 Visual Studio Code (VS Code) 开发 Office 加载项。
先决条件
项目创建工具。 有以下选项。
- Office 加载项的 Yeoman 生成器 (也称为“Yo Office”) 。 有关安装和使用说明,请参阅 使用 Yeoman 生成器创建 Office 外接程序项目。 使用此工具,可以选择创建使用仅加载项清单或 Microsoft 365 统一清单的加载项。 有关差异的详细信息,请从 Office 加载项清单开始。
- Microsoft 365 Agents Toolkit for Visual Studio Code。 有关安装说明,请参阅 安装代理工具包。 有关使用说明,请参阅 使用 Microsoft 365 Agents Toolkit 创建 Office 外接程序项目。 使用此工具,可以创建使用 Microsoft 365 统一清单的加载项。
使用 VS Code 开发加载项
若要使用项目,请使用 VS Code 打开项目的根文件夹。
这两种工具都创建功能有限的基本加载项。 你可通过在 VS Code 中编辑清单HTML、JavaScript/TypeScript 和 CSS 文件,自定义该加载项。 要简要了解 Yeoman 生成器创建的加载项项目中的项目结构和文件,请查看 5 分钟快速入门中与你创建的加载项类型相对应的 Yeoman 生成器指南。
测试和调试加载项
测试、调试和排查 Office 加载项问题的方法因平台和用于创建项目的工具而异。 有关详细信息,请参阅 测试和调试 Office 外接程序 和使用 Microsoft 365 代理工具包创建 Office 外接程序项目。
发布加载项
Office 加载项包括两个基本组件:清单文件和你自己的 Web 应用程序。 此清单定义各种设置,包括将外接程序与 Office 客户端集成的方式。 Web 应用程序提供 HTML、JavaScript 和其他文件,这些文件提供加载项的功能和 UI。
开发加载项时,可在本地 Web 服务器 (localhost) 上运行加载项,但如果已准备好发布该加载项供其他用户访问,则需要将 Web 应用程序部署到 Web 服务器或 Web 托管服务(例如 Microsoft Azure),并更新清单以指定所部署的应用程序的 URL。
如果加载项如期工作且你已准备好发布它供其他用户访问,请完成以下步骤。
通过命令行,在加载项项目的根目录中运行以下命令,准备所有文件供生产部署使用。
npm run build生成完成后,加载项项目的根目录中的 dist 文件夹将包含要在后续步骤中部署的文件。
将 dist 文件夹的内容上传到要托管你的加载项的 Web 服务器。 可使用任意类型的 Web 服务器或 Web 托管服务来托管加载项。
在 VS Code 中,打开位于项目的根目录中的外接程序清单文件。 将所有出现的
https://localhost:3000都替换为上一步中已部署到 Web 服务器的 Web 应用程序的 URL。选择要用于 部署 Office 外接程序的方法,并按照说明发布加载项。