团队DevOps之Commitlint配置篇

DevOps简介

 DevOps（Development和Operations的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合，来使得构建、测试、发布软件能够更加地快捷、频繁和可靠。

DevOps流程步骤

DevOps的应用场景往往是一个庞大复杂的背景和流程的场景，，以 IT 自动化以及持续集成（CI）、持续部署（CD）为基础，来优化程式开发、测试、系统运维等所有环节，大都包含一个持续交付流水线。

• 开发人员：IDE、Git等开发和编译工具
• 版本控制系统：分支策略、语义化版本
• 构建服务器：持续集成、代码质量检查
• 工件库：存放浏览器可以直接运行的二进制包
• 系统的包管理器：编译或测试环境系统上管理二进制包
• 环境一致性，依赖包的版本，操作系统，浏览器兼容
• 预发布或生产：预发布环境与生产环境互换（蓝绿发布，灰度发布，滚动发布）
• 发布管理：在高程度自动化测试的基础上实践自动化或半自动化（人工介入）部署
• 开发和生产环境问题管理系统

上述每一步骤都是软件开发中的必要环节，每一步都有重要的意义，下图是微软开发者Azure DevOps学习的进阶概要图。 

DevOps之Commitlint配置

为了便于团队开发协同工作，更好的维护项目，Commitlint便油然而生，本文会对目前流行的配置方法进行详细的说明，文中的项目是基于Commitlint + husky + eslint的基础上搭建的，直接上代码。

查看本地的Node版本号

原因：@commitlint最新版本仅支持Node>=12，husky最新版本也仅支持Node>=12。

PS C:\Windows\system32> node -v
v14.15.0

初始化项目

E:\组件库\demo\devops>git clone https://gitee.com/zhaotao27/commitlint-husky-demo.git
Cloning into 'commitlint-husky-demo'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), done.
Checking connectivity... done.

Or 这样创建项目

E:\组件库\demo\devops>npm init -y
Wrote to E:\组件库\demo\devops\package.json:
{
  "name": "commitlint-husky-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://gitee.com/zhaotao27/commitlint-husky-demo.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

在项目中安装@commitlint/config-conventional @commitlint/cli

npm install --save-dev @commitlint/config-conventional @commitlint/cli

在项目根目录生成项目配置的commitlint.config.js

echo module.exports = {extends: ['@commitlint/config-conventional']} > commitlint.config.js

默认的commitlint.config

module.exports = {
  extends: ['@commitlint/config-conventional']
}

安装其他依赖包

作用：commitizen规范化提交标准 cz-conventional-changelog-zh中文版的提交规范提示

npm install husky commitizen cz-conventional-changelog-zh conventional-changelog-cli --save-dev 

package.json 配置

"config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog-zh"
    }
  },
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prepare": "npx husky install",
    "lint": "lint-staged",
    "release": "standard-version",
    "commit": "git add . && npm lint && git cz",
    "genlog": "conventional-changelog -p angular -i CHANGELOG.md -s"
  }

激活husky配置

E:\组件库\demo\devops\commitlint-husky-demo>npm run prepare
> commitlint-husky-demo@1.0.0 prepare E:\组件库\demo\devops\commitlint-husky-demo
> npx husky install
husky - Git hooks installed
E:\组件库\demo\devops\commitlint-husky-demo>yarn husky add .husky/commit-msg 'npm yarn commitlint --edit $1'

commit-msg配置

说明：npm run lint在代码提交后进行代码格式校验

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint && npx --no-install commitlint --edit $1

执行命令npm run commit

E:\组件库\demo\devops\commitlint-husky-demo>npm run commit
> commitlint-husky-demo@1.0.0 commit E:\组件库\demo\devops\commitlint-husky-demo
> git add . && git cz
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory.
cz-cli@4.2.4, cz-conventional-changelog-zh@0.0.2
? 选择您要提交的更改类型: (Use arrow keys)
> feat:     一个新功能
  fix:      一个bug
  docs:     文档增删改
  style:    样式修改(空白、格式、缺少分号等)
  refactor: 既不修复bug也不添加新功能的更改
  perf:     性能优化
  test:     增加测试
(Move up and down to reveal more choices)

安装代码检测依赖

说明：eslint 代码校验， prettier 格式化代码， stylelint 样式解析 ，standard-version版本发布规范

npm install --save-dev eslint lint-staged prettier standard-version stylelint stylelint-config-standard

激活项目的Eslint代码检测

E:\组件库\demo\devops\commitlint-husky-demo>npx eslint --init
√ How would you like to use ESLint? · problems # 代码检测和问题警告
√ What type of modules does your project use? · esm #js模块解析
√ Which framework does your project use? · react # 应用React框架
√ Does your project use TypeScript? · No / Yes # 是否用TS
√ Where does your code run? · browser # 浏览器环境
√ What format do you want your config file to be in? · JavaScript # 语言
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest
√ Would you like to install them now with npm? · No / Yes
Installing eslint-plugin-react@latest
+ eslint-plugin-react@7.24.0

添加stylelint.config.js文件

module.exports = {
  extends: 'stylelint-config-standard',
};

版本发布命令

说明： 默认是patch小版本迭代，（feature 会更新 minor, bug fix 会更新 patch, BREAKING CHANGES 会更新 major）

E:\组件库\demo\devops\commitlint-husky-demo>npm run release
> commitlint-husky-demo@1.0.1 release E:\组件库\demo\devops\commitlint-husky-demo
> standard-version
√ bumping version in package.json from 1.0.1 to 1.0.2
√ bumping version in package-lock.json from 1.0.1 to 1.0.2
√ outputting changes to CHANGELOG.md
√ committing package-lock.json and package.json and CHANGELOG.md

普通Git提交Hooks

E:\组件库\demo\devops\commitlint-husky-demo>git add .
E:\组件库\demo\devops\commitlint-husky-demo>git commit -m "chore: 添加测试脚本文件"
> commitlint-husky-demo@1.0.1 lint E:\组件库\demo\devops\commitlint-husky-demo
> lint-staged
[STARTED] Preparing...
[SUCCESS] Preparing...
[STARTED] Running tasks...
[STARTED] Running tasks for **/*.less
[STARTED] Running tasks for src/**/*.{js,vue}
[SKIPPED] No staged files match **/*.less
[STARTED] prettier --write
[SUCCESS] prettier --write
[SUCCESS] Running tasks for src/**/*.{js,vue}
[SUCCESS] Running tasks...
[STARTED] Applying modifications...
[SUCCESS] Applying modifications...
[STARTED] Cleaning up...
[SUCCESS] Cleaning up...
[master 5f984bb] chore: 添加测试脚本文件
 1 file changed, 3 insertions(+)
 create mode 100644 src/example/test.demo.js

总结

以上代码均可以在Gitee代码仓库中查看，如果文中有不对的地方或者没考虑到的请在评论区指出，我会及时的进行补充说明；总的来说进行还是很顺利的，就是在安装Commitlint依赖的时候有版本的问题，前期的Commitlint提交规范也算结束了，后面就开始组件库的正式编码了，Devops的路还很长，希望和大家一起每次进步一点点，每天都有新收获！