最近，微软发布了一款名为 Teams Compose Extension 的工具包，用于快速构建 Microsoft Teams 应用程序，使得开发者们可以更方便快捷地定制并扩展 Teams 的消息撰写体验以及用户界面。而 generator-teams-compose-extension，则是一个 Yeoman 生成器，简化了项目配置和部署的过程，让我们更加专注于业务代码的实现。
本文将介绍如何使用该 npm 包，让开发者们更加轻松快捷地搭建和开发 Teams Compose Extension。
安装和使用
首先，确保你已经安装了最新版的 Node.js 和 Yeoman，在此基础上，在终端中输入以下命令，全局安装 generator-teams-compose-extension:
npm install -g yo generator-teams-compose-extension
生成器安装完成后，我们可以在任意目录下创建一个空的文件夹，用于存放项目的代码：
mkdir my-teams-compose-extension && cd my-teams-compose-extension
在该文件夹下，执行以下命令：
yo teams-compose-extension
随后，会要求开发者们配置以下信息：
- Microsoft App Id: 应填写通过 Microsoft 应用中心创建的应用 ID；
- Microsoft App Password: 应填写通过 Microsoft 应用中心创建的应用秘钥；
- Compose extension name: 应填写项目的名称，建议使用英文命名规则；
- Compose extension description: 应填写项目的描述信息；
- Compose extension command id: 应填写项目的命令 ID，标识了在 Teams 中的唯一身份。
配置完成后，会生成以下目录结构：
|____api | |____config.js |____public |____src | |____html | |____index.js | |____manifest.json |____test
需要注意的一点是，生成器中默认使用了 React 进行开发，若想使用其他的框架，需要手动修改 webpack.config.js 等相关配置文件。
接下来，我们来逐一讲解这些目录和文件的作用：
api
该目录下存放了一个 config.js 文件，用于存放访问 Teams API 的相关配置信息。
public
该目录下可存放项目所需的资源文件，如图片文件、样式文件等。
src
该目录下是项目的主要代码，分为以下三个文件或目录：
html
该目录用于存放项目的 HTML 模板文件，可自行编写和修改。
index.js
该文件是项目代码的入口文件，我们需要在其中编写项目的主要业务代码，调用 Teams API，并进行渲染等操作。
manifest.json
该文件用于存放 Teams Compose Extension 应用的配置信息，如按钮名称、图标等。
test
该目录用于存放项目的测试文件，类似于单元测试等。
最后，我们可以通过运行以下命令，启动项目的本地服务器：
npm start
至此，我们成功地创建了一个 Teams Compose Extension 项目，并可通过项目的代码进行开发实现。
示例代码
下面是一个简单的示例代码，通过调用 Teams API，实现在聊天页面中添加一个按钮：
-- -------------------- ---- -------
------ - ----- - ---- ----------------------
------ ----- ---- --------
------ ----- ------ - ----- ----------- -- -
-- ------------
----- ------- - ----- -------------------
----- ------------- - -----------------------------------------------------------------
-- -- ---- --
----- ----- - -
---------- ----------
--
----- ------- - -
---- ------------------------------------------------------------------------------------------------------------
------- ------
-------- -
-------------- ------- ------------------
--
------- ------
--
-- -- ---- -------------
------------------------------ -- -
----- -------------- - -
------------ ------------------------------------------
-------- -
-------- -----------------------------------------------------
----- ---------------
-------- ------
----- -
-
----- ------------
----- -------- -- --- ----- ------- ------------
--
-
----- ------------
------ -
-
----- ------------
-------- -
-
----- ---------
------ -
-
----- ----------
------ ---------- ----- --------- ---------------
---- -------------------------------------------------------------------------------------------------------
--
--
------ ----------
--
--
--
--
--
--
-------- ---
--
--
----- ---------------- - -
----------------- -------
------------ -----------------
--
-- ----
----- ----------- - -
----- ----------
------------ -------------------
----- -
--- --------------
----- -----------------------
--
---------- -
--- ----------------
----- ------------------
--
------------- -
--- ---------------
----- ---
--
---------- -------------------
--
----- ---------- - -
------------ ------------
-------- --------
--
-----------------------------------
---
--通过该示例代码，我们可了解到如何调用 Teams API，并在页面中添加一个按钮，从而实现定制和扩展 Teams Compose Extension 应用程序。
总结
本文详细介绍了 npm 包 generator-teams-compose-extension 的安装和使用，并使用示例代码演示了如何在 Teams Compose Extension 应用程序中调用 Teams API，实现添加按钮的操作。通过学习本文，相信开发者们已经掌握了开发 Teams 应用程序和使用 generator-teams-compose-extension 工具的基本知识和技能。希望能对大家在实际开发中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005598381e8991b448d7177