前端工程化实操

提交规范tools list:

• commitlint
• commitizen
• cg-git
• conventional-changelog-atom
• cz-conventional-changelog
• cz-customizable
• Conventional Commits

changelog生成：

• conventional-changelog-cli

others:

• eslint
• prettier
• stylelint
• 工作流：lint-staged
• branch分支规范：branch-name-lint
• 统一编辑器配置：EditorConfig

小记

git 提交规范：type(scope): subject，记住subject之前有空格

husky

https://typicode.github.io/husky/getting-started.html

定义：当在git commit或git push时，可以进行格式化git提交消息、运行脚本、格式化代码等

特性：

• 轻量、0依赖
• 由git特性core.hooksPath驱动
• 输入输出型
• 用户提示
• 支持各大OS、git gui、自定义hooks目录、嵌套的项目、monorepos

用法

• 在hooks中添加exit 1会提前终止命令

自动安装（建议）

使用以下命令快速集成husky，安装后将自动添加：

• 在package.json添加prepare script
• 生成.husky目录，并创建一个pre-commit hook文件
• 配置git hooks路径

npm

npx husky-init && npm install

pnpm

pnpm dlx husky-init && pnpm install

yarn

yarn dlx husky-init --yarn2 && yarn

手动安装

第一步：安装husky

npm

npm install husky -D

yarn

yarn add husky --dev
# 安装它以替代prepare script
yarn add pinst --dev

第二步：开启git hooks

npm

npx husky install

# 该命令会生成下面的结构
# --root（项目根目录）
# ----.husky
# ------_
# --------.gitignore
# --------husky.sh

yarn

yarn husky install

第三步：在package.json中定义一个prepare script，在npm install时自动启动git hooks（即第二步的内容）

npm

# 也可以在package.json中直接添加
npm pkg set scripts.prepare="husky install"

yarn

{
  // 私有包配置
  "private": true,
  "scripts": {
    "postinstall": "husky install"
  },

  // 公有包配置
  "private": false,
  scripts: {
    "postinstall": "husky install",
    "prepack": "pinst --disable",
    "postpack": "pinst --enable"
  }
}

第四步：使用npx husky add <file_path> [cmd]创建一个hook，一般file_path在.husky目录下。你也可以自行创建文件添加内容。

# 添加pre-commit hook，值为npm test
npx husky add .husky/pre-commit "npm test"

# 该命令会创建.husky/pre-commit文件，生成以下内容：
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm test

第五步：在上面四步走完后，husky拦截git commit就生效了，在：

git add .
# git commit会被拦截
git commit -m '提交说明'

卸载

npm

npm uninstall husky && git config --unset core.hooksPath

yarn

yarn remove husky && git config --unset core.hooksPath

将husky存放在其他地方

默认情况下，husky相关的配置是存在root/.husky/目录下的，若你想更改目录，则需要修改package.json的配置。若husky存放在项目root之外的地方，需要修改hooks的内容，在执行命令前添加cd front，表明husky脚本的位置

{
  "scripts": {
    // 添加存放的目录：将.husky => .config/husky
    "prepare": "husky install .config/husky"

    // 存放在项目之外：将.husky => ../front/.husky
    "prepare": "cd .. && husky install front/.husky"
  }
}

跳过husky拦截

# 添加 --no-verify 选项参数
git commit -m '提交说明' --no-verify

commitlint

定义：格式化提交（git commit）消息

所需依赖：husky

用法

1.安装

全局安装

npm install -g @commitlint/cli @commitlint/config-conventional

本地安装

npm install -D @commitlint/cli @commitlint/config-conventional

2.配置

配置文件可以是commitlint.config.js, .commitlintrc.js, .commitlintrc, .commitlintrc.json, .commitlintrc.yml或者在package.json下的commitlint字段中配置

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

3.添加hooks

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'

4.使用提示版cli

让你根据提示信息逐步输入提交内容，确保能够遵守commitlint.config.js中的提交规范

使用提示版cli的几种方式：

1. @commitlint/cli + @commitlint/config-conventional + @commitlint/prompt-cli（依赖需要安装）
2. commitizen + commitizen adapter：这里的是commitizen官方的
3. commitizen + （适配器：@commitlint/cz-commitlint、@commitlint/prompt） + inquirer@8 + @commitlint/config-conventional + @commitlint/cli：这里的是commitizen+commitlint一起使用的

使用prompt-cli

# 1. 安装
npm install @commitlint/prompt-cli -D

json

// 2. package.json设置脚本
{
  "scripts": {
    "commit": "commit"
  }
}

bash

# 3. 使用脚本运行prompt-cli
npm run commit

commitlint+commitizen结合用法

# 1. 安装@commitlint/cz-commitlint commitizen inquirer@8，单纯使用1，2即可使用了
npm install --save-dev @commitlint/cz-commitlint commitizen inquirer@8

# 3. 配合commitlint使用，运行1，2，3，4步
npm install --save-dev @commitlint/config-conventional @commitlint/cli

# 4. 修改提示cli的模板，这是第二处修改的地方，可修改，可不修改，修改的话，模板内容会不一样，这里也可以用社区分享的配置，安装相应的npm包即可
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

json

// 2. 修改package.json，到这里，已经可以运行命令使用了
{
  "scripts": {
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      // 第一处模板修改的地方
      "path": "@commitlint/cz-commitlint"
    }
  }
}

5.测试

全局

# 1. 测试一个提交文本是否符合提交规范
echo 'foo: bar' | commitlint

⧗   input: foo: bar
✖   type must be one of [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] [type-enum]

✖   found 1 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

# 2. 测试git提交是否符合规范
# HEAD~5..HEAD，即测试最近的五条git提交是否规范，然后依次输出相关信息
commitlint --from=HEAD~5

本地

# 提交测试，v8.0版本后无问题将无输出提示，可以给commitlint添加参数--verbose获取积极的输出
git commit -m "foo: this will fail"

# 测试之前提交
npx commitlint --from HEAD~1 --to HEAD --verbose

配置文件

moudle.exports = {
  // 继承的内容
  extends: ['@commitlint/config-conventional'],
  // 预置解析规则
  parserPreset: 'conventional-changelog-atom',
  // 在提交信息之后，格式化输出结果（比如错误信息等）
  formatter: '@commitlint/format',
  // 规则，设置之后，将覆盖extends的
  rules: {
    // https://commitlint.js.org/#/reference-rules
  },
  // 提交信息忽略
  ignores: [(commit) => commit === 'ignore'],
  // 默认忽略
  defaultIgnores: true,
  // 自定义propmpt
  prompt: {
    settings: {},
    messages: {},
    questions: {
      type: {
        description: "xxx"
      }
    }
  }
}

commitizen

定义：当使用commitizen去git commit时，你将获得填充commmit字段的要求和提示

重提交：当提交失败时，想按上次的提交信息进行提交，可以使用：npm run commit -- --retry（通过npm script）、npx cz --retry（通过npx）

使用

第一步：安装

# 全局
npm install -g commitizen

# 本地
npm install -D commitizen

第二步：使用commitizen adaptor（切换adaptor查看）初始化项目，下述命令将完成三件事情：

1. 安装cz-conventional-changelog adaptor npm包
2. 添加该包到package.json的开发或生产依赖中
3. 告诉commitizen使用的是哪个适配器：添加"config": {"commitizen": {"path": "cz-conventional-changelog"}}到package.json文件中；或者是新建一个.czrc文件，将{"path": "cz-conventional-changelog"}填充进去

注释：

• commitizen.path需要被require.resolve正确解析，支持npm包、相对于process.cwd()的包含index.js的目录、相对于process.cwd()的一个js后缀的文件、完整的相对路径文件名、绝对路径

# 全局，本地安装，在命令之前加上npx即可
# npm
commitizen init cz-conventional-changelog --save-dev --save-exact

# yarn
commitizen init cz-conventional-changelog --yarn --dev --exact

# pnpm
commitizen init cz-conventional-changelog --pnpm --save-dev --save-exact

第三步：在packag.json中添加scripts，指向commitizen

{
  "scripts": {
    // 值为cz或git-cz，git-cz是cz的别名
    "commit": "cz",
    // 若你在husky中使用了precommit hook，你需要换过一个名字，因为npm script有一个特性，preXXX hooks和npm script名字XXX相同时，将会运行两次preXXX(未实现)
    "cz": "cz"
  }
}

第四步：直接运行脚本即可出现cli面板，注意在当前是不需要依赖husky的，安装commitizen和适配器之后即可。

若你还想在运行git commit时就显示出提示cli，则需要安装husky+git hooks，配置完成后直接使用git commit即可，此时不使用teminal（比如使用vscode左侧的source control配合扩展）进行提交则会报错阻止提交

使用script展示提示面板

npm run commit

直接使用git commit展示提示面板

# 1. 运行husky，添加hooks
npx husky add .husky/prepare-commit-msg "exec < /dev/tty && npx cz --hook || true"

# 2. 使用git commit、git commit -m ''时都会展示面板
git commit -m 'xxx'

Adapters list

We know that every project and build process has different requirements, so we've tried to keep Commitizen open for extension. You can do this by choosing from any of the pre-built adapters or even by building your own. Here are some of the great adapters available to you:

• cz-conventional-changelog
• cz-conventional-changelog-for-jira
• cz-conventional-changelog-with-jiraid-detection
• cz-jira-smart-commit
• @endemolshinegroup/cz-jira-smart-commit
• @endemolshinegroup/cz-github
• rb-conventional-changelog
• @mapbox/cz-mapbox-changelog
• cz-customizable
• cz-commitlint
• commitlint
• vscode-commitizen
• cz-emoji
• cz-adapter-eslint
• commitiquette
• cz-format-extension
• cz-emoji-conventional
• cz-git

文件历史