前端开发工作流

[minhuaF]

commitlint

对git commit message 进行规范和约束，既方便团队协作、也能快速定位问题。针对commit message，已经有现成的工具 Commitlint。

Commitlint的底层逻辑其实是使用了 git hook。

1. 安装并创建配置文件

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

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

提交的一些规范示例此处有详细说明：[@commitlint/config-conventional](https://www.npmjs.com/package/@commitlint/config-conventional)

如果需要定制 commit rule，可移步 [这里](https://commitlint.js.org/#/reference-rules)

## husky

1. 安装 husky

$ npm install husky -D

2. 在`package.json`中添加`prepare`脚本

$ npm set-script prepare "husky install" $ npm run prepare

`prepare`脚本会在`npm install`（不带参数）之后自动执行。也就是说在执行`npm install`之后会执行`husky install`命令，改命令会创建`.husky/`目录并指定该目录为`git hooks`所在的目录。

3. 添加 `hook`

$ npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

4. 添加`commit message`的约束
在`package.json`文件中添加
```javascript
"husky": {
    "hooks": {
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" // 校验commit时添加的备注信息是否符合要求的规范
    }
  }

5. 尝试提交

   
   $ git commit -m 'add commitlint' 
   ⧗   input: add commitlint
   ✖   subject may not be empty [subject-empty]
   ✖   type may not be empty [type-empty]

✖ found 2 problems, 0 warnings ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

$ git commit -m 'foo: add commitlint' ⧗ input: foo: add commitlint ✖ type must be one of [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] [type-enum]

✖ found 1 problems, 0 warnings ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

**内置的常用type类别**

- build 
- chore：其他修改，比如构建流程、依赖管理（与业务代码无关（ no production code change），由于语义不是很明确，可能会导致滥用，可以考虑禁用）
- ci
- docs
- feat
- fix
- perf
- refactor
- revert
- style：代码格式修改，不是指css的修改（no production code change）
- test

**demo**

chore: run tests on travis ci

fix(scope): add api params

feat(scope): add comment section

### 自定义配置
(待补充)

## changelog

有了`commitlint`的提交约束，能方便直接生成`changelog`，而不需要人为地添加进去

1. 安装

$ npm i standard-version -D

2. 添加 `script`

$ npm set-script release "standard-version"

3. 提交

第一次提交使用

$ npm run release -- --first-release

之后的提交使用

$ npm run release

## push tag

changlog产生的tag并不会传送到远程仓库服务器上，创建完之后需要显示的推送标签，详情参考[官方文档](https://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-%E6%89%93%E6%A0%87%E7%AD%BE)，这边简单地列举下操作流程

列出所有的标签
```git
$ git tag

推送所有标签到远程仓库

$ git push origin --tags

删除标签

$ git tag -d <tagname>

...

通过上面生成 changelog 时，需要同步push tag。

参考资料

优雅的提交你的 Git Commit Message 使用 husky、commitlint 和 lint-staged 来构建你的前端工作流（vue、react、dva）