CHANGELOG 的实现

项目需要写版本信息时有对除了版本号之外更详细的 changelog 的展示, 于是就需要在平时的 git commit 中进行规范, 才能自动生成CHANGELOG.md.

Husky

首先本地安装 husky yarn add husky -D, 相信做过 lint 的同学一定接触过 husky ,有着丰富的钩子. 其中 pre-commit就可以对代码进行 lint 检查, 避免 lint 的错误被上传.

{
  "scripts": {
    "lint": "vue-cli-service lint --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint && git add ."
    }
  }
}

如果使用的是 vue 的脚手架, 其中内置了GitHook, 用的是yorkie这个库, fork 自 husky. 可按需使用.

总之, 自动化就是需要我们往流程里加一些控制命令, 以按照我们的需求实现. 那么 husky 就是很好的控制流程工具, 仅此而已, 具体要怎么做还需要调用其他依赖模块.类似摩登时代里面的流水线, 老板安排卓别林去流水线某个地方去拧螺丝, 但是螺丝怎么拧还得看卓老的, 下面就是螺丝工人们.

Commitizen

完成后全局安装 commitizen

yarn global add commitizen

会在使用 git cz开始提交时被触发, 可以按照模板书写适合生成 CHANGELOG 的 commit, 这样才可以通过下面的 commitlint 工具

你可以理解为就是一个格式化 commit 的东西.

安装完成后在项目根目录下使用

commitizen init cz-conventional-changelog --yarn --dev --exact

配置commitizen, 会在package.json 中添加commitizen路径

{
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

Commitlint

这是检查 commit-msg 是否符合标准, 那么什么是标准呢? js 有 eslint, 那么 commit 就有 commitlint, 需要安装@commitlint/cli commitlint 的 命令行控制台, 用来传递 commit-msg 给标准 --> @commitlint/config-conventional

yarn add @commitlint/cli @commitlint/config-conventional -D

类似 eslint.config.js一样需要对 commitlint做配置. 新建一个commitlint.config.js

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

然后在 husky 的 hooks 中添加对应命令. 记住, 这是螺丝工, husky 是流水线.

{
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
  }
}

至此, 我们之后的所有 commit msg 都会符合 commitlint 的标准. 也就意味着可以自动生成有语义的 CHANGHELOG, 那么材料(commit msgs)有了, 来自动化加工出 CHANGELOG 吧.

standard-version

standard-version 可以使用脚本生成 CHNAGELOG, 并且更新版本号, 如果有需要还可以创建 tag. 详情就看文档按需去自定义了.

yarn add standard-version -D

安装完成之后, 创建一个发布脚本.

{
    "script": {
        "release": "standard-version"
    }
}

在 git status clean 的时候使用

yarn release

就会生成一个 CHANGELOG.md, 并更新版本号.

快去试试吧.

以上内容都是 yarn 版本, 一下是npm 的版本:

package.json 的配置一样:

{
  "name": "Haha",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "lint": "vue-cli-service lint --fix",
    "release": "standard-version",
    "c": "git add . && git cz"
  },
  "dependencies": {
  },
  "devDependencies": {
    "@commitlint/cli": "^8.2.0",
    "@commitlint/config-conventional": "^8.2.0",
    "cz-conventional-changelog": "3.0.2",
    "husky": "^3.1.0",
    "standard-version": "^7.0.1"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint && git add .",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

指令:

// 安装全局依赖
npm install --global commitizen
// 安装项目依赖
npm install --save-dev standard-version husky @commitlint/config-conventional @commitlint/cli
// 配置 commitizen
commitizen init cz-conventional-changelog --save-dev --save-exact
// 生成 CHANGELOG
npm run release