前端项目代码提交规范化实践

commitizen规范提交

// 全局安装commitizen
yarn global add commitizen

// 初始化
commitizen init cz-conventional-changelog --save --save-exact

执行后在package.json下会生成以下配置

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

另外还可以安装中文包

yarn add cz-conventional-changelog-zh -D

并修改配置,可自定义:

"config": {
    "commitizen": {
       "path": "./node_modules/cz-conventional-changelog-zh",
      "defaultType":"[新增功能]",
       "types": {
        "[新增功能]": {
          "description": "新增功能点、新增需求",
          "title": "Features"
        },
        "[Bug修复]": {
          "description": "修复Bug,线上，测试，验收阶段的bug",
          "title": "Bug Fixes"
        },
        "[文档修改]": {
          "description": "文档增删改",
          "title": "Documentation"
        },
        "[样式修改]": {
          "description": "样式修改(空白、格式、缺少分号等)",
          "title": "Styles"
        },
        "[代码重构]": {
          "description": "既不修复bug也不添加新功能的更改",
          "title": "Code Refactoring"
        },
        "[性能优化]": {
          "description": "性能优化",
          "title": "Performance Improvements"
        },
        "[测试代码]": {
          "description": "增加测试",
          "title": "Tests"
        },
        "[编译代码]": {
          "description": "影响构建系统或外部依赖项的更改(示例范围:gulp、broccoli、npm)",
          "title": "Builds"
        },
        "[持续集成]": {
          "description": "对CI配置文件和脚本的更改(示例范围:Travis, Circle, BrowserStack, SauceLabs)",
          "title": "Continuous Integrations"
        },
        "[其他提交]": {
          "description": "除src目录或测试文件以外的修改",
          "title": "Chores"
        },
        "[回退更改]": {
          "description": "回退历史版本",
          "title": "Reverts"
        },
        "[修改冲突]": {
          "description": "修改冲突",
          "title": "Conflict"
        },
        "[字体修改]": {
          "description": "字体文件更新",
          "title": "Fonts"
        },
        "[删除文件]": {
          "description": "删除文件",
          "title": "Delete Files"
        },
        "[暂存文件]": {
          "description": "暂存文件",
          "title": "Stash Files"
        }
      }
    }
  }

为了方便提交，添加package.json中scripts的配置：

{
    "scripts": {
    ...
        "commit": "git add -A && git cz && git push",
    }
}

standard-version自动化版本控制

// 安装
yarn add standard-version -D

添加scripts配置

{
  "scripts": {
    ...
    "standard": "standard-version"
  }
}

编写自定义脚本，进行版本号升级控制:

//  scripts/version.js
/* eslint-disable */
const exec = require('child_process').exec
const inquirer = require('inquirer')

const states = {
  major: '版本升级（新功能不兼容旧版本时）',
  minor: '特性更新（添加新功能或功能增强时）',
  patch: '修复补丁（修复常规错误时）',
  skip: '跳过（谨慎！请仅在未完成时选择此项）'
}

inquirer.prompt([
  {
    type: 'list',
    name: 'version',
    message: '请选择您要升级的版本号类型:',
    choices: Object.keys(states).map(k => `${k}: ${states[k]}`)
  }
]).then(({ version }) => {
  const type = version.split(':')[0]
  if (type !== 'skip') {
    exec(`npm run standard -- --release-as ${type}`)
    console.log('正在更新版本号.....')
  }
}).catch((err) => {
  console.error(err)
  process.exit(1)
})

修改package.json 的scripts 中的commit配置并添加update:version命令：

{
    "scripts": {
    ...
        "commit": "git add -A && git cz && npm run update:version && git push",
    "update:version": "node ./scripts/version.js"
    }
}

在运行commitizen提交后，将会执行脚本文件version.js进行版本更新，若不选择skip，则运行standard命令，会在根目录下生成CHANGELOG.md（版本更新日志文件）。

集成Husky和lint-staged

• Husky可以在 git 提交代码的前后，执行一系列的 git hooks，以对代码、文件等进行预设的检查，一旦检查不通过，就可以阻止当前的代码提交，避免了不规范的代码和 git 提交出现在项目中。
• lint-staged 是一个专门用于在通过 git 提交代码之前，对暂存区的代码执行一系列的格式化。当 lint-staged 配合 git hooks 使用时，可以在 git 提交前的 hook 中加入 lint-staged 命令，这样就能在提交代码之前，对即将提交的代码进行格式化，成功之后就会提交代码。

// 安装
yarn add husky -D

yarn add lint-staged -D

// 同时集成
npx mrm@2 lint-staged

执行命令后，你就会看到你的 package.json 里多了一个 lint-staged 配置项，且根目录下多了一个 .husky 目录，里面就包含了 pre-commit 文件，里面包含了一个最基础的命令：npx lint-staged。

我们可以修改lint-staged的配置项已达到我们校验代码的目的，比如eslint、stylelint等等

{
    ...
 "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": [
      "eslint --cache --fix",
      "vue-cli-service lint"
    ]
  }
}

可创建其他钩子git hooks，并在文件里面编写shell脚本

// 新增其他hook
npx husky add [fileName]