Share via

使用 Visual Studio Code 开发 Office 加载项

  • 项目

本文介绍如何使用 Visual Studio Code (VS Code) 开发 Office 加载项。

注意

要了解如何使用 Visual Studio 创建 Office 加载项，请参阅使用 Visual Studio 开发 Office 加载项。

先决条件

  • Node.js（最新LTS 版本）。 访问 Node.js 站点 ，下载并安装适合你的操作系统的版本。

  • 最新版本的 Yeoman 和适用于 Office 加载项的 Yeoman 生成器。若要全局安装这些工具，请从命令提示符处运行以下命令。

    npm install -g yo generator-office

    注意

    即便先前已安装了 Yeoman 生成器，我们还是建议你通过 npm 将包更新为最新版本。

  • 已连接到 Microsoft 365 订阅的 Office (包括 Office 网页版)。

    注意

    如果你还没有 Office，你可能有资格通过 Microsoft 365 开发人员计划获得Microsoft 365 E5开发人员订阅;有关详细信息，请参阅常见问题解答。 或者，可以 注册 1 个月的免费试用版 或 购买 Microsoft 365 计划。

使用 Yeoman 生成器创建加载项项目

如果你正在将 VS Code 用作集成开发环境 (IDE)，则应使用适用于 Office 加载项的 Yeoman 生成器来创建 Office 加载项项目。Yeoman 生成器会创建一个 Node.js 项目，它可通过 VS Code 或任何其他编辑器进行管理。

要使用 Yeoman 生成器创建 Office 加载项，请按照 5 分钟快速入门中与你要创建的加载项类型相对应的说明进行操作。

使用 VS Code 开发加载项

在 Yeoman 生成器完成加载项项目的创建后，请使用 VS Code 打开项目的根文件夹。

提示

在 Windows 上，可通过命令行导航到项目的根目录，然后输入 code .在 VS Code 中打开该文件夹。 在 Mac 上，需要先将 code 命令添加到路径中，然后才可使用该命令在 VS Code 中打开项目文件夹。

Yeoman 生成器会创建一个功能受限的基本加载项。 你可通过在 VS Code 中编辑清单HTML、JavaScript/TypeScript 和 CSS 文件，自定义该加载项。 要简要了解 Yeoman 生成器创建的加载项项目中的项目结构和文件，请查看 5 分钟快速入门中与你创建的加载项类型相对应的 Yeoman 生成器指南。

测试和调试加载项

用于测试、调试和故障排除 Office 加载项的方法因平台而异。 有关详细信息，请参阅 测试和调试 Office 加载项。

发布加载项

Office 加载项由一个 Web 应用程序和一个清单文件构成。 Web 应用程序定义加载项的用户界面和功能，清单指定 Web 应用程序的位置并定义加载项的设置和功能。

开发加载项时，可在本地 Web 服务器 (localhost) 上运行加载项，但如果已准备好发布该加载项供其他用户访问，则需要将 Web 应用程序部署到 Web 服务器或 Web 托管服务（例如 Microsoft Azure），并更新清单以指定所部署的应用程序的 URL。

如果加载项如期工作且你已准备好发布它供其他用户访问，请完成以下步骤。

  1. 通过命令行，在加载项项目的根目录中运行以下命令，准备所有文件供生产部署使用。

    npm run build

    生成完成后，加载项项目的根目录中的 dist 文件夹将包含要在后续步骤中部署的文件。

  2. 将 dist 文件夹的内容上传到要托管你的加载项的 Web 服务器。 可使用任意类型的 Web 服务器或 Web 托管服务来托管加载项。

  3. 在 VS Code 中，打开项目根目录中的加载项清单文件 (manifest.xml)。 将所有出现的 https://localhost:3000 都替换为上一步中已部署到 Web 服务器的 Web 应用程序的 URL。

  4. 选择要用来部署 Office 加载项的方法，再按照说明发布清单文件。

另请参阅