npm 包 circle-github-bot 使用教程

介绍

CircleCI 是一款基于云的持续集成和部署工具，而 circle-github-bot 则是一个便于集成 CircleCI 与 GitHub 的 npm 包，目的是在 GitHub 上面创建 pull request 和 merge request 的时候，自动触发 CircleCI 的构建流程。

本文将为大家详细介绍如何使用 npm 包 circle-github-bot。

安装

使用 npm 包管理器 npm 进行安装。

--- ------- -----------------

使用

初始化

在使用 circle-github-bot 之前，我们需要在 CircleCI 和 GitHub 上分别进行配置。

CircleCI 配置

  1. 进入 CircleCI 的官网并进行登录。
  2. 选择需要集成的项目，并进入 Settings 页面。
  3. 在页面的左侧栏中，选择 Environment Variables。
  4. 点击 Add Environment Variable 按钮，并输入以下内容：
    • Key：GITHUB_TOKEN
    • Value：你的 GitHub personal access token（需要包含对该仓库的 push 权限）
    • Scope：该变量的 scope 选项卡需要设为 All。

GitHub 配置

  1. 进入 GitHub 的官网并进行登录。
  2. 进入需要集成的项目，并点击 Settings 按钮。
  3. 在页面的左侧栏中，选择 Webhooks。
  4. 点击 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.**。

其中，{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。

安装

--- ------- -----------------

配置

在项目的 package.json 文件中，我们增加以下的 circle-github-bot 配置信息。

- ------------
-
  ---
  -------------------- -
    -------- ------ -------- --- --------
    -------- ------ ------ ------- -------
    ------- ------ ------ ---------- -------
    --------------- ----- ------ ---- --- ---- -------- -- --------
    ----------------- ---- ---------
    -------------- ---- --- ------
    ------------------- ---- --- -------
    ---------------- ---- --- ------
  -
-

构建流程

在 CircleCI 项目中，我们创建一个 .circleci/config.yml 文件，并进行以下配置。

- --------------------
-----
  --------
    -------
      - ------ ----------------
    ------
      - --------
      - ----
          ----- -------
          -------- --- --

  -----
    -------
      - ------ ----------------
    ------
      - --------
      - ----
          ----- ----
          -------- --- --- ----
      - ----
          ----- ----
          -------- --- --- ----

  -------
    -------
      - ------ ----------------
    ------
      - --------
      - ----
          ----- ------- ------------
          -------- ---- -------------------------------- ---
      - ----
          ----- ----
          -------- ---- ----------------------------- ---
      - ----
          ----- -----
          -------- ---- ---------------------------------- ---
      - ----
          ----- ------- ------
          -------- ---- ------------------------------- ---

----------
  -------- -
  ------
    -----
      - -------
      - ----
      - -------
          ---------
            - ----
          --------
            ---------
              ----- --- ------------------------------ --

---------
  -------
    ------
      - ----
          ----- -----------------
          -------- --- -----------------

其中，我们在 deploy 中使用了从 circle-github-bot 中导入的命令参数，并在命令中按照参数进行操作。

使用

在项目的根目录中，执行以下命令即可启动 CircleCI 自动构建流程。

--- -----------------

总结

本文通过详细的步骤，介绍了如何使用 npm 包 circle-github-bot。通过这个包，我们可以方便地在 GitHub 上创建 pull request 和 merge request 时，自动触发 CircleCI 的构建流程。这不仅可以提高我们的工作效率，也可以方便我们进行持续集成和持续部署。希望本文能对前端开发者的工作有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f76bc087116197505561a91

阅读全文

猜你喜欢

  • npm 包 @bolt/elements-links 使用教程

    前言 在前端开发中，我们经常需要添加链接元素。为了避免从头开始编写和设计链接，许多开发人员会使用现成的 UI 库。而 @bolt/elements-links 就是这样一款 UI 库。

    4 年前
  • npm 包 @bolt/objects-island 使用教程

    在前端开发中，我们经常需要使用一些样式和布局的组件。这些组件可以提高我们的效率和代码质量。其中，npm 包 @bolt/objects-island 就是其中之一。

    4 年前
  • npm 包 @bolt/tools-font-size 使用教程

    简介 @bolt/tools-font-size 是一个用于在前端开发中快速设置字体大小的 npm 包，它可以帮助开发者快速而准确地设置字体大小，从而使得页面布局更加美观、规范。

    4 年前
  • NPM 包 @bolt/polyfills 使用教程

    介绍 @bolt/polyfills 是一个用于前端开发的 NPM 包。它提供了一系列的 Polyfills，用于在旧版浏览器中模拟新特性。通过使用这个包，开发者可以让自己开发的网站在更多的浏览器中正...

    4 年前
  • npm 包 @bolt/generic-shared 使用教程

    简介 @bolt/generic-shared 是一个前端开发使用的 npm 包，它提供了一组通用的工具函数和 UI 组件，可帮助您快速创建高效、易维护的 Web 应用程序。

    4 年前
  • npm 包 @bolt/elements-page 使用教程

    简介 @bolt/elements-page 是一个 Bolt Design System 下的 React 页面元素组件库。它提供了多种基本页面元素的组件，比如按钮、输入框、表单等等，可以快速构建精...

    4 年前
  • npm包 @bolt/objects-ui-list 使用教程

    前言 @bolt/objects-ui-list 是一个基于Bolt Design System的UI列表组件。它可以用于构建简单但实用的UI列表，轻松地管理和显示数据，为用户提供良好的用户体验。

    4 年前
  • npm 包 @bolt/tools-font-weight 使用教程

    前言 前端开发中，我们经常需要在页面中设置字体的粗细。常常使用 CSS 的 font-weight 属性来实现。但在实际开发中，我们经常遇到不同的字重数字表示不同的样式的问题。

    4 年前
  • npm 包 @polymer/gen-closure-declarations 使用教程

    在前端开发中，如果你使用 Polymer 这个库进行开发，你会发现需要编写 Closure Compiler 的声明文件来进行类型检查和优化。但是，手动编写这些声明文件是一项非常繁琐的工作。

    4 年前
  • NPM 包 @polymer/iron-media-query 使用教程

    1. 简介 @polymer/iron-media-query 是一个 Polymer 元素，用于在 Web 应用程序中创建可响应式的布局和样式。该元素可以帮助我们在指定的屏幕宽度下更新 Web 应用...

    4 年前
  • npm 包 @polymer/iron-scroll-target-behavior 使用教程

    @polymer/iron-scroll-target-behavior 是一个 Polymer 元素，它可以让你将滚动事件添加到任何元素上，同时提供帮助类来确定用户是否在滚动元素上或在滚动元素内部。

    4 年前
  • npm 包 @polymer/paper-badge 使用教程

    简介 @polymer/paper-badge 是 Polymer 项目中的一个元素，用于在元素的右上角显示数字徽章。该元素封装了着色、阴影、动画等样式，方便开发者快速使用。

    4 年前
  • 前端开发： npm 包 @polymer/iron-dropdown 使用教程

    随着前端技术的不断发展，现代化的前端开发越来越倚重于构建组件化、可重用的应用程序。为了方便实现这一需求，许多优秀的 npm 包被提供出来，其中一个非常受欢迎的包就是 @polymer/iron-dro...

    4 年前
  • npm 包 @polymer/neon-animation 使用教程

    简介 @polymer/neon-animation 是一个为 Web 组件提供深度的动画效果的 npm 包。它是 Polymer 的子项目之一，提供了许多常见的动画效果和可定制的选项。

    4 年前
  • npm 包 @polymer/paper-menu-button 使用教程

    介绍 @polymer/paper-menu-button 是 Polymer 3.x 中的一个组件，用于实现可展开菜单的按钮。该组件通过使用 Polymer 的多个元素来构建自定义元素，以提供可重用...

    4 年前
  • NPM包 @polymer/iron-list 使用教程

    在前端开发中，需要展示大量数据时，很多时候会用到列表的展示方式。@polymer/iron-list 是一个 Polymer 中的列表组件，提供了高性能滚动，并可自动回收 DOM 节点等特性，减少了大...

    4 年前
  • npm 包 @polymer/iron-pages 使用教程

    前言 当我们的应用需要在多个页面之间切换时，我们并不是希望一次性加载所有的页面，而是在需要的时候再进行加载，这不仅可以提高页面的加载速度，还可以更好地管理我们的代码。

    4 年前
  • npm 包 @polymer/iron-scroll-threshold 使用教程

    介绍 随着前端技术的发展，越来越多的网站需要实现无限滚动加载等功能，这时候就需要用到 @polymer/iron-scroll-threshold 这个 npm 包了。

    4 年前
  • npm 包 @polymer/paper-fab 使用教程

    什么是 @polymer/paper-fab? @polymer/paper-fab 是一个由 Polymer 团队开发的可重用 Web Components 元素。

    4 年前
  • npm 包 @polymer/paper-item 使用教程

    介绍 @polymer/paper-item 是 Polymer 3.x 中的一个可重用组件，用于创建具有单行文本和/或图像的项目。在构建 Web 应用程序时，您可能需要在工具栏、列表、下拉列表等组件...

    4 年前

相关推荐

    暂无文章