从脚本实验室代码创建独立的 Office 外接程序

项目
11/14/2023

如果在 Script Lab 中创建代码段，则可能希望将其转换为独立加载项。可以将代码从脚本实验室复制到由 Office 加载项的 Yeoman 生成器生成的项目（也称为“Yo Office”）。然后，可以继续将代码作为外接程序进行开发，最终可以将其部署到其他人。

本文中的步骤指的是 Visual Studio Code，但你可以使用任何你喜欢的代码编辑器。

创建新的 Yo Office 项目

需要创建独立的外接程序项目，该项目将成为代码片段代码的新开发位置。

运行命令 yo office --projectType taskpane --ts true --host <host> --name "my-add-in"，其中 <host> 是以下值之一。

Excel
outlook
Powerpoint
Word

重要

--name 参数值必须采用双引号，即使没有空格也是如此。

前面的命令创建名为 my-add-in 的新项目文件夹。它配置为在指定的主机中运行，并使用 TypeScript。默认情况下，脚本实验室使用 TypeScript，但大多数代码片段都是 JavaScript。如果愿意，可以生成 Yo Office JavaScript 项目，但只需确保复制的任何代码都是 JavaScript。

在脚本实验室中打开代码片段

使用脚本实验室中的现有代码片段了解如何将代码片段复制到 Yo Office 生成的项目。

打开 Office（Word、Excel、PowerPoint 或 Outlook），然后打开脚本实验室。
选择脚本实验室>代码。如果在 Outlook 中工作，请打开电子邮件以查看功能区上的脚本实验室。
在 Script Lab 中打开代码片段。若要从现有示例开始，请转到“Script Lab”任务窗格，然后选择“示例”。

将代码片段代码复制到Visual Studio代码

现在，可以在 VS Code 中将代码片段中的代码复制到 Yo Office 项目。

在 VS Code 中，打开 my-add-in 项目。

在后续步骤中，你将从 Script Lab 中的多个选项卡复制代码。

Script Lab中的选项卡。

复制任务窗格代码

在VS Code中，打开 /src/taskpane/taskpane.ts 文件。如果使用 JavaScript 项目，文件名 为taskpane.js。
在“脚本实验室”中，选择脚本选项卡。
将脚本选项卡中的所有代码复制到剪贴板。将 JavaScript) 的 taskpane.ts (或 taskpane.js 的全部内容替换为复制的代码。

复制任务窗格 HTML

在VS Code中，打开 /src/taskpane/taskpane.html 文件。
在“脚本实验室”中，选择“ HTML ”选项卡。
将 HTML 选项卡中的所有 HTML 复制到剪贴板。将 <body> 标记中的所有 HTML 替换为复制的 HTML。

复制任务窗格 CSS

在VS Code中，打开 /src/taskpane/taskpane.css 文件。
在“脚本实验室”中，选择“ CSS ”选项卡。
将 CSS 选项卡中的所有 CSS 复制到剪贴板。将 taskpane.css 的全部内容替换为复制的 CSS。
保存对前面步骤中更新的文件所做的所有更改。

添加 jQuery 支持

脚本实验室在代码片段中使用 jQuery。需要将此依赖项添加到 Yo Office 项目才能成功运行代码。

打开 taskpane.html 文件，并将以下脚本标记添加到 <head> 部分。
```
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.js"></script>
```
注意

jQuery 的特定版本可能有所不同。可以通过选择“ 库” 选项卡来确定脚本实验室使用的版本。

在 VS Code 中打开终端并输入以下命令。

npm install --save-dev jquery@3.1.1
npm install --save-dev @types/jquery@3.3.1

如果创建了具有其他库依赖项的代码片段，请务必将其添加到 Yo Office 项目。在脚本实验室的“ 库 ”选项卡上查找所有库依赖项的列表。

处理初始化

脚本实验室自动处理Office.onReady初始化。需要修改代码，以提供自己的Office.onReady处理程序。

打开 taskpane.ts （或适用于 JavaScript 的 taskpane.js ）文件。

对于 Excel、PowerPoint 或 Word，请替换：

$("#run").on("click", () => tryCatch(run));

与:

Office.onReady(function () {
  // Office is ready.
  $(document).ready(function () {
    // The document is ready.
    $("#run").on("click", () => tryCatch(run));
  });
});

对于 Outlook，请替换：

$("#get").on("click", get);
$("#set").on("click", set);
$("#save").on("click", save);

与:

Office.onReady(function () {
  // Office is ready
  $(document).ready(function () {
    // The document is ready
    $("#get").on("click", get);
    $("#set").on("click", set);
    $("#save").on("click", save);
  });
});

保存文件。

自定义函数

如果代码片段使用自定义函数，则需要使用 Yo Office 自定义函数模板。若要将自定义函数转换为独立加载项，请执行以下步骤。

运行命令 yo office --projectType excel-functions --ts true --name "my-functions"。

重要

--name 参数值必须采用双引号，即使没有空格也是如此。
打开 Excel，然后打开“脚本实验室”。
选择脚本实验室>代码。
在 Script Lab 中打开代码片段。如果要从现有示例开始，请转到“Script Lab”任务窗格，选择“示例”，然后在“自定义函数”部分下搜索。
打开 /src/functions/functions.ts 文件。如果使用的是 JavaScript 项目，则文件名 functions.js。
在“脚本实验室”中，选择脚本选项卡。
将脚本选项卡中的所有代码复制到剪贴板。将代码粘贴到 functions.ts (或 javaScript) functions.js的顶部，以及复制的代码。
保存文件。

测试独立加载项

完成所有步骤后，运行并测试独立加载项。运行以下命令以开始使用。

npm start

Office 将启动，你可以从功能区打开加载项的任务窗格。恭喜！现在，你可以继续将外接程序构建为独立项目。

控制台日志记录

脚本实验室中的许多代码片段将输出写入任务窗格底部的控制台部分。 Yo Office 项目没有控制台部分。所有 console.log* 语句都将写入默认调试控制台（如浏览器开发人员工具）。如果希望输出转到任务窗格，则需要更新代码。