介绍
CircleCI 是一款基于云的持续集成和部署工具，而 circle-github-bot 则是一个便于集成 CircleCI 与 GitHub 的 npm 包，目的是在 GitHub 上面创建 pull request 和 merge request 的时候，自动触发 CircleCI 的构建流程。
本文将为大家详细介绍如何使用 npm 包 circle-github-bot。
安装
使用 npm 包管理器 npm 进行安装。
npm install circle-github-bot
使用
初始化
在使用 circle-github-bot 之前，我们需要在 CircleCI 和 GitHub 上分别进行配置。
CircleCI 配置
- 进入 CircleCI 的官网并进行登录。
- 选择需要集成的项目，并进入 Settings 页面。
- 在页面的左侧栏中，选择 Environment Variables。
- 点击 Add Environment Variable 按钮，并输入以下内容：
- Key：
GITHUB_TOKEN - Value：你的 GitHub personal access token（需要包含对该仓库的 push 权限）
- Scope：该变量的 scope 选项卡需要设为
All。
- Key：
GitHub 配置
- 进入 GitHub 的官网并进行登录。
- 进入需要集成的项目，并点击 Settings 按钮。
- 在页面的左侧栏中，选择 Webhooks。
- 点击 Add webhook 按钮，并输入以下内容：
- Payload URL:
https://circleci.com/api/v1.1/project/{vcs-type}/{account}/{repo}/tree/{branch}?circle-token={circle-token} - Content Type:
application/json - Secret:
任意字符 - Events：选择 Just the push event.。
- Payload URL:
其中，{vcs-type} 代表代码托管的类型，如 github，{account} 和 {repo} 分别代表 GitHub 上的账户名和仓库名，{branch} 表示要监测的分支，{circle-token} 为 CircleCI 的 API Token。
这些都是配置 CircleCI 项目和 GitHub webhook 所必须的参数，需要自行替换成自己项目的对应信息。
构建流程
在 CircleCI 的项目中，创建一个名为 .circleci/config.yml 的文件。这个配置文件中，我们需要在 jobs、workflows、commands 中加入对 circle-github-bot 库的使用指令。
-- -------------------- ---- -------
- --------------------
-----
------
--- ---------
------
- --------
- ----
----- -----
-------- --- --- -----
- ----
----- ----
-------- --- ----
----------
-------- -
------
-----
- -----
---------
- ----- ----------------- -------
-------
------
- ----
----- -----------------
-------- --- -----------------在 commands 中增加了使用 circle-github-bot 库的 deploy 指令。
配置参数
接下来，需要在项目的 package.json 文件中，添加 circle-github-bot 的配置信息。
-- -------------------- ---- -------
- ------------
-
---
-------------------- -
-------- ------ -------- --- --------
-------- ------ ------ ------- -------
------- ------ ------ ---------- -------
--------------- ----- ------ ---- --- ---- -------- -- --------
----------------- ----- ------- -- ------- -------------
-------------- ----- ------- -- -------
------------------- ----- ------- -- --- ------ ------------
---------------- ----- ------- -- --------
-
-其中最重要的四个参数分别是：
token：必须填写，可以在项目的 Project Settings -> API permissions 中找到。owner：必须填写，GitHub 上项目所属用户的名字。repo：必须填写，GitHub 上项目的名字。remoteBranch：如果不填写，则默认取当前分支的名字。
示例代码
以一个服务器渲染的 React 应用为例，以下示例代码将展示如何安装和使用 circle-github-bot。
安装
npm install circle-github-bot
配置
在项目的 package.json 文件中，我们增加以下的 circle-github-bot 配置信息。
-- -------------------- ---- -------
- ------------
-
---
-------------------- -
-------- ------ -------- --- --------
-------- ------ ------ ------- -------
------- ------ ------ ---------- -------
--------------- ----- ------ ---- --- ---- -------- -- --------
----------------- ---- ---------
-------------- ---- --- ------
------------------- ---- --- -------
---------------- ---- --- ------
-
-构建流程
在 CircleCI 项目中，我们创建一个 .circleci/config.yml 文件，并进行以下配置。
-- -------------------- ---- -------
- --------------------
-----
--------
-------
- ------ ----------------
------
- --------
- ----
----- -------
-------- --- --
-----
-------
- ------ ----------------
------
- --------
- ----
----- ----
-------- --- --- ----
- ----
----- ----
-------- --- --- ----
-------
-------
- ------ ----------------
------
- --------
- ----
----- ------- ------------
-------- ---- -------------------------------- ---
- ----
----- ----
-------- ---- ----------------------------- ---
- ----
----- -----
-------- ---- ---------------------------------- ---
- ----
----- ------- ------
-------- ---- ------------------------------- ---
----------
-------- -
------
-----
- -------
- ----
- -------
---------
- ----
--------
---------
----- --- ------------------------------ --
---------
-------
------
- ----
----- -----------------
-------- --- -----------------其中，我们在 deploy 中使用了从 circle-github-bot 中导入的命令参数，并在命令中按照参数进行操作。
使用
在项目的根目录中，执行以下命令即可启动 CircleCI 自动构建流程。
npx circle-github-bot
总结
本文通过详细的步骤，介绍了如何使用 npm 包 circle-github-bot。通过这个包，我们可以方便地在 GitHub 上创建 pull request 和 merge request 时，自动触发 CircleCI 的构建流程。这不仅可以提高我们的工作效率，也可以方便我们进行持续集成和持续部署。希望本文能对前端开发者的工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f76bc087116197505561a91