发布使用 Visual Studio Code 开发的加载项

  • 项目

本文介绍如何发布使用 Yeoman 生成器创建并使用 Visual Studio Code (VS Code) 或任何其他编辑器开发的 Office 加载项。

注意

发布加载项供其他人用户访问

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

开发过程中，可以在本地 Web 服务器上运行加载项， localhost () 。 准备好将其发布以供其他用户访问时，需要部署 Web 应用程序并更新清单以指定已部署应用程序的 URL。

当外接程序根据需要工作时，可以使用 Azure 存储扩展直接通过 Visual Studio Code 发布它。

使用 Visual Studio Code 发布

注意

这些步骤仅适用于使用 Yeoman 生成器创建且使用 XML 格式清单的项目。 如果使用 Teams 工具包创建了加载项，或者使用 Yeoman 生成器创建了外接程序，并且它使用 Microsoft 365 的统一清单，则它们不适用。

  1. 从 Visual Studio Code (VS Code) 中的根文件夹打开项目。

  2. (Ctrl+Shift+X) 选择“ 视图>扩展 ”打开“扩展”视图。

  3. 搜索并安装 Azure 存储 扩展。

  4. 安装后，Azure 图标将添加到 活动栏。 选择它以访问扩展。 如果 活动栏 处于隐藏状态，请选择“ 查看>外观>活动栏”将其打开。

  5. 选择“ 登录到 Azure ”以登录到 Azure 帐户。 如果还没有 Azure 帐户，请选择“创建 Azure 帐户”来创建一个。 按照提供的步骤设置帐户。

    在 Azure 扩展中选择的“登录到 Azure”按钮。

  6. 登录后，会看到 Azure 存储帐户显示在扩展中。 如果还没有存储帐户，请使用命令面板中的 “创建存储帐户” 选项创建一个。 仅使用“a-z”和“0-9”将存储帐户命名为全局唯一名称。 请注意，默认情况下，这会创建具有相同名称的存储帐户和资源组。 它会自动将存储帐户放入美国西部。 这可以通过 Azure 帐户在线调整。

    在 Azure 扩展中选择“存储帐户 > ”“创建存储帐户”。

  7. 右键单击存储帐户，然后选择“ 配置静态网站”。 系统将要求输入索引文档名称和 404 文档名称。 将索引文档名称从默认值 index.html 更改为 taskpane.html。 还可以更改 404 文档名称，但不是必需的。

  8. 再次右键单击存储帐户，这次选择“ 浏览静态网站”。 在打开的浏览器窗口中，复制网站 URL。

  9. 打开项目的清单文件 (manifest.xml) ，更改对 localhost URL (的所有引用，例如 https://localhost:3000) 已复制的 URL。 此终结点是新创建的存储帐户的静态网站 URL。 保存对清单文件的更改。

  10. 打开命令行提示符或终端窗口，并转到外接程序项目的根目录。 运行以下命令，为生产部署准备所有文件。

    npm run build

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

  11. 在 VS Code 中，转到“资源管理器”，右键单击 dist 文件夹，然后选择“ 通过 Azure 存储部署到静态网站”。 出现提示时，选择之前创建的存储帐户。

    选择 dist 文件夹，右键单击，然后选择“通过 Azure 存储部署到静态网站”。

  12. 部署完成后，右键单击之前创建的存储帐户，然后选择“ 浏览静态网站”。 这会打开静态网站并显示任务窗格。

  13. 最后， 旁加载清单文件 ，加载项将从刚刚部署的静态网站加载。

为 Excel 部署自定义函数

如果外接程序具有自定义函数，还有几个步骤在 Azure 存储帐户上启用它们。 首先，启用 CORS，以便 Office 可以访问 functions.json 文件。

  1. 右键单击 Azure 存储帐户，然后选择“ 在门户中打开”。

  2. 在“设置”组中， 选择“资源共享” (CORS) 。 还可以使用搜索框查找此内容。

  3. 使用以下设置创建新的 CORS 规则。

    属性 值
    允许的来源 *
    允许的方法 GET
    允许的标头 *
    公开的标头 Access-Control-Allow-Origin
    最大年龄 200

  4. 选择“保存”。

警告

此 CORS 配置假定服务器上的所有文件都对所有域公开可用。

接下来，为 JSON 文件添加 MIME 类型。

  1. 在名为 web.config的 /src 文件夹中创建一个新文件。

  2. 插入以下 XML 并保存文件。

    <?xml version="1.0"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>

  3. 打开 webpack.config.js 文件。

  4. 在 列表中 plugins 添加以下代码，以在运行生成时将web.config复制到捆绑包中。

    new CopyWebpackPlugin({
  patterns: [
  {
    from: "src/web.config",
    to: "src/web.config",
  },
 ],
}),

  5. 打开命令行提示符并转到外接程序项目的根目录。 然后，运行以下命令以准备所有文件进行部署。

    npm run build

    生成完成后，外接程序项目的根目录中的 dist 文件夹将包含要部署的文件。

  6. 若要进行部署，请在 VS Code Explorer 中右键单击 dist 文件夹，然后选择“ 通过 Azure 存储部署到静态网站”。 出现提示时，选择之前创建的存储帐户。 如果已部署 dist 文件夹，系统会提示你是否要使用最新更改覆盖 Azure 存储中的文件。

部署更新

在加载项中添加功能或修复 bug 时，需要部署更新。 如果外接程序由一个或多个管理员部署到其组织，则某些清单更改将要求管理员同意更新。 在授予同意之前，将阻止用户从外接程序中访问。 以下清单更改需要管理员再次同意。

注意

每当对清单进行更改时，都必须引发清单的版本号。

另请参阅