前端工程化实践三——利用Git hooks实现持续集成

最新推荐文章于 2025-09-25 03:59:08 发布

原创

最新推荐文章于 2025-09-25 03:59:08 发布 · 626 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ESlint #puppeteer

本文介绍前端持续集成的概念及其实现方式，包括使用Githooks、ESlint进行代码检查，以及运用Puppeteer进行DOM验证。

1 发布前检查的相关知识

1.1 持续集成的由来

持续集成最早是在客户端软件开发中提出的一种软件集成模式，有两个关键点：daily build和BVT(build verification test),BVT就是对build出的目标程序进行基本的验证测试

1.2 前端持续集成

前端项目的开发周期较短，一次build的时间通常也就几分钟，而测试工程师产生case的成本较高，并不太适用短周期的前端开发，前端工程师往往会采用更轻量级的测试方案，通常由3部分组成：

Git hooks完成检查的时机
利用ESlint实现轻量级的代码语法检查
利用Phantomjs无头浏览器对最终的生产代码进行规则的检查和校验

2 Git hooks的基本用法

git像其它版本控制系统一样，能在特定的重要动作发生时触发自定义脚本，这些被触发的自定义脚本被称作Git hooks，它们存在于.git/hooks文件夹中。也就是说，git提供事件钩子，能被特定的事件触发后调用。Git hooks主要分2类，客户端hooks和服务端hooks。客户端钩子pre-commit,pre-push等由诸如提交和合并这样的操作所调用，而服务器端钩子由诸如接收被推送的提交这样的联网操作所调用。注意在clone版本库时，客户端hooks是不会被clone下来的。git默认提供了一些用shell书写的.sample结尾的hooks模板，将.sample去掉便可被执行，也可使用其它脚本语言书写，指定执行环境即可。

在前端持续集成中，一般会将lint操作放进pre-commit钩子里，将check操作放进pre-push钩子里，下面是用js写的一个windows环境下的git hook示例

#!/bin/node
const process = require("process")

console.log("executing pre-commit")
process.exit(1)

类unix环境下则是

#!/usr/bin/env node
const process = require("process")

console.log("executing pre-commit")
process.exit(1)

3 ESlint的基本用法

ESlint是ECMAScript/JavaScript代码中识别和报告模式匹配的工具，也即检查语法错误的工具

3.1 ESlint安装和简单使用

参考eslint用户手册

使用 npm 安装 ESLint：$ npm install eslint --save-dev
然后设置一个配置文件：$ ./node_modules/.bin/eslint --init
之后，便可在任何文件或目录上运行ESLint如下：$ ./node_modules/.bin/eslint yourfile.js

4 ESlint API

本节主要介绍如何在git hooks中应用ESlint,当ESlint检查出错误时，阻止git的提交，需要使用ESlint的Node API——ESlint class

在eslint-demo项目中初始化git，并在.git/hooks/目录下添加如下的pre-commit脚本

const {
   
    ESLint } = require("eslint"); // 此处的分号不能省略，因为下面有(

(async function main() {
   
   
  // 1. Create an instance with the `fix` option.
  const eslint = new ESLint({
   
    fix: false }); // doesn't fix error

  // 2. Lint files. This doesn't modify target files.
  const results = await eslint.lintFiles(["index.js"])