前端工程化之提交规范

安静de沉淀

实现原理

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

忙起来像个狗?,轻松起来像只猫?,没工作闲得像条鱼?

6.5k 声望
278 粉丝
0 条评论

忙起来像个狗?,轻松起来像只猫?,没工作闲得像条鱼?

6.5k 声望
278 粉丝
文章目录
宣传栏