相对于 VSTO 和 COM 加载项而言，使用前端技术栈（网页）来构建加载项应用可以使得生态更加统一，无论是桌面端、Web 端甚至是移动端都可以无缝的使用一次构建的加载项应用。这也是微软近几年推进的一项重大改革。现在我们一起来从头到尾使用这个方式来创建一个自己的 Office 加载项应用。

先决条件

Node.js，跟随最新 LTS 版本即可

Visual Studio Code，编辑器，任意其它亦可

配置环境

先安装 yeoman 和 Office 加载项应用生成器，使用以下命令：

npm install -g yo generator-office

创建工程目录：

yo office

此时会提示一些定制化的选项，依次选择这些选项即可：

Office Add-in Task Pane project

Javascript

My Office Add-in（这个是应用名，自行取）

Excel（支持的Office客户端应用程序，我以Excel为例）

创建完成后，进入该工程目录内，运行本地开发环境：

npm start

执行后，Node.js 会自动创建一个 web 应用托管程序，这是 Office 加载项应用的页面托管服务，也就是说，实际上的 Office 加载项打开后的内容，就是一个网页。

office加载项开发

同时，开发环境下会自动打开一个新的 Excel 进程，并且此进程是已经旁加载了你的加载项应用。

在 Excel 的 Ribbon 栏，会多出一个应用的按钮，这个就是我们创建的新的加载项应用，这里则是：数据适配器。

office加载项开发

打开后就能看到加载项应用的主体页面内容了。

office加载项开发

到这里为止，我们已经做好了整套的应用构建流程，接下去，我会对项目的目录结构进行说明。

目录结构

office加载项开发

assets：静态资源存放的目录，比如图标文件，图片文件。

dist：编译后的文件存放目录。

src：页面文件在这里，实际上开发都是在此目录下进行。

src/taskpane：任务面板。

src/taskpane/_.css：样式文件，举行样式。

src/taskpane/_.html：页面文件，决定布局。

src/taskpane/\*.js：脚本文件，决定逻辑。

逻辑关系

*.html 文件决定了布局，假设我们定义了一个按钮，我们需要定义一下这个按钮的 id 对应的值，比如：

<button id="test">测试按钮</button>

*.js 内，Office.onReady 闭包函数中，我们添加一行：

document.getElementById("test").onclick = test;

然后仿照下方的export async function run()函数体，写一段新的 test 函数：

export async function test() {
  try {
    await Excel.run(async (context) => {
      const sheets = context.workbook.worksheets;
      const sheet = sheets.add("测试工作表");
      sheet.activate();
      sheet.getCell(0, 0).values = "我是测试内容";
      await context.sync();
    });
  } catch (error) {
    console.error(error);
  }
}

最后，我们回到 Excel 内，点击右侧的加载项页面中的按钮后，会自动创建一个名为测试工作表的工作表，并且 A1 单元格的值变成了：我是测试内容。

引入其它组件

比如说，我们需要在 Excel 中使用 Jquery，同样可以通过 webpack 的安装方式来执行：

npm install jQuery

然后回到你需要引入的 js 文件中，在开头加上引用语句：

import * as jquery from "jquery";

然后就可以香香的使用这些组件了。

至此，基本的一个开发逻辑就完成。

发布

首先，微软提供了非常多的发布方式，包括 Office Store、离线安装、共享文件安装、Sharepoint 托管安装等等。一般自己使用的话建议离线安装即可。

我们把开发好的项目，运行编译：

npm run build

然后把 dist 目录下的文件，放到你的 web 托管服务上，再修改 mainfest.xml 内的指向地址即可。

清单的配置可以直接参考微软官方文档：

https://docs.microsoft.com/zh-cn/office/dev/add-ins/develop/add-in-manifests?tabs=tabid-1

下一次我会再详细的说明 Office 加载项应用的发布、部署的步骤。