通过

设置开发环境

  • 项目

本指南可帮助你设置工具，以便你可以按照我们的快速入门或教程创建 Office 加载项。 如果已安装这些组件，则可以开始快速入门，例如此 Excel React快速入门。

获取 Microsoft 365

你需要一个 Microsoft 365 帐户。 通过 Microsoft 365 开发人员计划，你可能有资格获得Microsoft 365 E5开发人员订阅，其中包括所有 Office 应用;有关详细信息，请参阅常见问题解答。 或者，可以 注册 1 个月的免费试用版 或 购买 Microsoft 365 计划。

安装环境

有三种类型的开发环境可供选择。 在三个环境中创建的 Office 外接程序项目的基架是不同的，因此，如果多个人员将处理外接程序项目，他们都必须使用相同的环境。

  • Node.js 环境：建议使用。 在此环境中，工具在命令行中安装并运行。 外接程序的 Web 应用程序部件的服务器端以 JavaScript 或 TypeScript 编写，并托管在 Node.js 运行时中。 此环境中有许多有用的外接程序开发工具，例如 Office linter 和名为 webpack 的捆绑程序/任务运行器。 项目创建和基架工具是一个名为 Office Yeoman Generator 的命令行工具， (也称为“Yo Office”) ，不过你仍然可以使用下一个选项中提到的Visual Studio Code扩展。
  • Visual Studio Code：如果使用 Visual Studio Code，并且希望从扩展而不是命令行工具创建项目，请选择此环境。 项目创建和基架工具是 Teams 工具包或 Office 外接程序开发工具包扩展。
  • Visual Studio 环境：仅当开发计算机是 Windows，并且你想要使用基于 .NET 的语言和框架（例如 ASP.NET）开发外接程序的服务器端时，才选择此环境。 Visual Studio 中的外接程序项目模板的更新频率不如 Node.js 环境中的更新频率高。 有关详细信息，请参阅 Visual Studio 环境 选项卡。

注意

Visual Studio for Mac不包括 Office 外接程序的项目基架模板，因此，如果开发计算机是 Mac，则应使用 Node.js 环境。

选择所选环境的选项卡。

要安装的main工具包括：

  • Node.js
  • npm
  • 你选择的代码编辑器
  • Office Yeoman Generator (Yo Office)
  • Office JavaScript linter

本指南假定你知道如何使用命令行工具。

安装 Node.js 和 npm

Node.js 是用于开发新式 Office 外接程序的 JavaScript 运行时。

通过从其网站下载最新推荐版本来安装 Node.js。 按照操作系统的安装说明进行操作。

npm 是一个开放源代码软件注册表，可从中下载用于开发 Office 加载项的包。安装 Node.js 时，它通常会自动安装。 若要检查已安装 npm 并查看已安装的版本，请在命令行中运行以下命令。

npm -v

如果出于任何原因想要手动安装，请在命令行中运行以下命令。

npm install npm -g

提示

你可能希望使用 Node 版本管理器在 Node.js 和 npm 的多个版本之间切换，但这并非严格必要。 有关如何执行此操作的详细信息， 请参阅 npm 的说明。

安装代码编辑器

若要生成 Web 部件，可以使用任何支持客户端开发的代码编辑器或 IDE，如：

安装 Yeoman 生成器 — Yo Office

项目创建和基架工具是 Office 加载项的 Yeoman 生成器，亲切地称为 Yo Office。 你需要安装最新版本的 Yeoman 和 Yo Office。 若要全局安装这些工具，请通过命令提示符运行以下命令。

npm install -g yo generator-office

安装和使用 Office JavaScript linter

Microsoft提供了 JavaScript linter，可帮助你在使用 Office JavaScript 库时捕获常见错误。 如果使用 Office 加载项的 Yeoman 生成器 或 Teams 工具包创建外接程序项目，则会为你安装并配置 linter。 跳到 运行 Linter。

如果手动创建了项目，请使用以下步骤安装和配置 linter。

  1. 在项目的根目录中， (安装 Node.js 和 npm) 后运行以下两个命令。

    npm install office-addin-lint --save-dev
npm install eslint-plugin-office-addins --save-dev

  2. 在项目的根目录中，创建一个名为 .eslintrc.json 的文本文件（如果还没有文件）。 请确保它具有名为 plugins 和 extends的属性，这两种属性都是数组类型。 数组 plugins 应包含 "office-addins" ，数组 extends 应包含 "plugin:office-addins/recommended"。 下面展示了一个非常简单的示例。 .eslintrc.json 文件可能具有这两个数组的其他属性和附加成员。

    {
  "plugins": [
    "office-addins"
  ],
  "extends": [
    "plugin:office-addins/recommended"
  ]
}

  3. 在项目的根目录中，打开 package.json 文件， scripts 并确保数组具有以下成员。

    "lint": "office-addin-lint check",

运行 linter

在编辑器的终端（如 Visual Studio Code）或命令提示符中使用以下命令运行 linter。 linter 发现的问题将显示在终端或提示符中，并且在使用支持 linter 消息的编辑器（如 Visual Studio Code）时，也会直接显示在代码中。

npm run lint

安装Script Lab

Script Lab是一种用于快速创建调用 Office JavaScript 库 API 的代码原型的工具。 Script Lab本身是一个 Office 加载项，可从 Script Lab 的 AppSource 安装。 Excel、PowerPoint 和 Word 有一个版本，还有一个单独的 Outlook 版本。 有关如何使用 Script Lab 的信息，请参阅使用 Script Lab 探索 Office JavaScript API。

后续步骤

尝试创建自己的加载项或使用Script Lab来试用内置示例。

创建 Office 加载项

可完成 5 分钟快速入门，快速创建适合 Excel、OneNote、Outlook、PowerPoint、Project 或 Word 的基本加载项。 如果之前已完成快速入门，并且想要创建稍微复杂一些的加载项，则应尝试 使用教程。

使用 Script Lab 了解 API

了解 Script Lab 中的内置示例库，熟悉 Office JavaScript API 的功能。

另请参阅