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

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]