前端工程化之提交规范

实现原理

前端工程化之提交规范，主要是通过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 ': '

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