前端工程化之提交规范

实现原理

前端工程化之提交规范，主要是通过 husky 在.git 目录中埋点 hooks 脚本，在提交前，通过 lint-staged 对当前修改做相应的格式化 / 校验，在提交时，通过 commitlint 对提交信息做校验，或通过 commitizen 模板生成规范的提交信息，如果需要版本日志，可以通过 changelog 生成修改日志。

1. 准备

git 项目根目录下若没有 package.json，初始化生成：

$ npm init -y

2. husky 钩子

husky 是一个为 git 客户端增加 hook 的工具，通过在.git 目录下增加相应的钩子实现在 pre-commit 阶段执行一系列流程，依赖安装：

$ npm i husky -D

package.json 中添加 ”husky”: {} 字段，或新建文件.huskyrc，配置如下：

{
    "hooks": {
        "pre-commit": "lint-staged",
        "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
}

上面示例中配置了 pre-commit、commit-msg 两个 hooks

3. lint-staged 过滤

Lint-staged 仅对 git 暂存区（本次修改的）文件执行指定动作，如：格式美化、校验、git add 等，依赖安装：

$ npm i lint-staged prettier -D

package.json 中添加 ”lint-staged”: {} 字段，或新建.lintstagedrc 文件，配置如下：

{"*.{js,jsx,ts,tsx}": [
        "prettier --single-quote --write",
        "git add"
    ]
}

如果安装使用 eslint，可以把 prettier 项换成 ”eslint –quiet –fix”,

4. commitlint 校验

commitlint 用于 commit 提交信息的规范校验，依赖安装：

$ npm i @commitlint/config-conventional @commitlint/cli -D

commit 格式化校验配置文件，新建./commitlint.config.js 文件，配置如下：

module.exports = {extends: ['@commitlint/config-conventional'],
    rules: {
        'type-enum': [
            2,
            'always',
            [
                'build', // 构建系统 / 工具更改
                'ci', // 持续集成配置 / 脚本更改
                'chore', // 构建过程或辅助工具的变动
                'docs', // 文档更改
                'feat', // 新功能、特性
                'fix', // bug 修复
                'merge', // Merge branch
                'perf', // 性能优化
                'refactor', // 代码重构
                'revert', // 代码回滚
                'style', // 代码风格（不影响代码运行的变动）'test' // 测试用例
            ]
        ]
    }
}

提交时格式：git ci -am ‘<type>: <subject>’

5. commitizen 模板

commitizen 提供了交互式的模板，根据提示自动生成符合规范的 commit message，依赖安装：

$ npm i commitizen -D

package.json script 项添加配置:

    "scripts": {"commit": "git add . && git-cz",},
    "config": {
        "commitizen": {"path": "./node_modules/cz-conventional-changelog"}
    }

提交时：npm run commit，根据提示生成规范提交信息， 注意：如果当前为 git 项目子目录，config 字段中 path 路径需修改

6. changelog 版本日志

用于自动生成版本日志 CHANGELOG.md 文件，依赖安装：

$ npm i standard-changelog -D

package.json script 项添加配置:

    "scripts": {"log": "standard-changelog -f && git add CHANGELOG.md"}

生成日志时，直接运行：npm run log