乐趣区

前端工程化之提交规范

实现原理

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

退出移动版