前端工程化

规范化git commit提交的message

由于各种各样的原因，无论是团队合作还是个人项目，commit历史中总会夹杂着各种简短而不知所谓的message, 不太方便维护，为了缓解这一问题，前端可以使用commitizen包重新调整commit的流程，并实现message的规范化

1.安装相关包

npm install -g commitizen
npm install -D cz-git

2.在package.json中添加config项, 并在scripts中添加一项

"scripts": {
    "cmt": "git-cz"
  },
"config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
  }

3.于项目根目录创建文件.commitlintrc.js（如果package.json中的type项值为module的话，文件后缀改为.cjs）

// .commitlintrc.js
/** @type {import('cz-git').UserConfig} */
module.exports = {
    rules: {
        // @see: https://commitlint.js.org/#/reference-rules
    },
    prompt: {
        alias: { fd: "docs: fix typos" },
        messages: {
            type: "选择你要提交的类型 :",
            scope: "选择一个提交范围（可选）:",
            customScope: "请输入自定义的提交范围 :",
            subject: "填写简短精炼的变更描述 :\n",
            body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
            breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
            footerPrefixesSelect: "选择关联issue前缀（可选）:",
            customFooterPrefix: "输入自定义issue前缀 :",
            footer: "列举关联issue (可选) 例如: #31, #I3244 :\n",
            confirmCommit: "是否提交或修改commit ?",
        },
        types: [
		        { value: "新增功能✨", name: "新增功能:✨     例如增加了一个新的页面、组件、接口" },
            { value: "修复缺陷🪲", name: "修复缺陷:🪲      例如修复了一个崩溃，逻辑错误，样式问题。" },
            { value: "文档更新📝", name: "文档更新:📝     例如添加了注释，修改了README文件，API文档" },
            { value: "代码格式💄", name: "代码格式:💄     例如调整了缩进，空格，换行，或者括号" },
            { value: "代码重构♻️", name: "代码重构:♻️      例如提取了函数，合并了两个类，或者移动了文件" },
            { value: "性能提升⚡️", name: "性能提升:⚡     ️例如减少了内存占用，提高了运行速度，或者减少了网络请求" },
            { value: "持续集成🎡", name: "持续集成:🎡     例如添加了一个测试用例，修改了一个构建脚本，或者更新了一个依赖库" },
            { value: "回退代码🔙", name: "回退代码:🔙     撤销了之前的一次或多次提交" },
            { value: "其他修改🧹", name: "其他修改:🧹     例如修改了一些配置文件，删除了一些无用的代码，或者添加了一些日志。" },
            { value: "合并分支🎋", name: "合并分支:🎋     合并了两个或多个分支的代码" },   
				],
        // 是否使用Emoji
        useEmoji: true,
        emojiAlign: "center",
        useAI: false,
        aiNumber: 1,
        themeColorCode: "",
        scopes: [],
        allowCustomScopes: true,
        allowEmptyScopes: true,
        customScopesAlign: "bottom",
        customScopesAlias: "custom",
        emptyScopesAlias: "empty",
        upperCaseSubject: false,
        markBreakingChangeMode: false,
        allowBreakingChanges: ["feat", "fix"],
        breaklineNumber: 100,
        breaklineChar: "|",
        skipQuestions: [],
        issuePrefixes: [
            // 如果使用 gitee 作为开发管理
            { value: "link", name: "link:     链接 ISSUES 进行中" },
            { value: "closed", name: "closed:   标记 ISSUES 已完成" },
        ],
        customIssuePrefixAlign: "top",
        emptyIssuePrefixAlias: "skip",
        customIssuePrefixAlias: "custom",
        allowCustomIssuePrefix: true,
        allowEmptyIssuePrefix: true,
        confirmColorize: true,
        maxHeaderLength: Infinity,
        maxSubjectLength: Infinity,
        minSubjectLength: 0,
        scopeOverrides: undefined,
        defaultBody: "",
        defaultIssues: "",
        defaultScope: "",
        defaultSubject: "",
    },
};

之后，将 npm cmt代替git commit使用

效果如图

commit时自动检查以及格式化代码

在编写代码时可能为了快捷，并没有注意代码的格式，比如缩进、空格等，单人项目还好，对自己的代码风格较为熟悉，可当项目为多人协作开发时，这会导致合作时的不便，因此就有了husky，在commit时自动处理代码

husky通过给git添加hook来实现为git添加功能，理论上来说它所能做的远不只自动格式化代码

1.下载对应的包

//一步到位式，向package.json添加scripts，并创建了一个样例hook，并配置了hook的path
	//npm
	npx husky-init && npm install
	//pnpm
	pnpm dlx husky-init && pnpm install

//逐步式
npm install husky --save-dev
npx husky install
npm pkg set scripts.prepare="husky install"

1.5(可选)新建hook

npx husky add filename "命令"
//例如npx husky add .husky/pre-commit "npm test"
//命令（npm test）执行失败时自动中断commit

不难发现，husky的作用只是在git某一个命令执行前/中/后执行另外一个指定命令。因此实际上除前端以外，后端、或者算法也能够使用husky来规范化团队的git

而我们目前希望它做的是commit前格式化代码，因此我们需要一个将代码格式化的命令

在此，我使用的是Prettier包与lint-staged

Prettier是一个前端的代码格式化包，能够格式化JavaScript · TypeScript · Flow · JSX · JSONCSS · SCSS · LessHTML · Vue · AngularGraphQL · Markdown · YAML。可谓是非常满足前端的需要

而lint-staged是代码检查器，检查代码是否有语法错误，其github主页的about为“🚫💩 — Run linters on git staged files”, 可见该包是用来缓解💩 山构建过程的

2.下载Prettier与lint-staged

npm i --save-dev prettier lint-staged

3.项目根目录下创建文件.prettierrc.json 与 .prettierignore。内容空白即可，若需要自定义配置，请参考官方文档 Install · Prettier

4.整合husky、Prettier以及lint-staged

//npm
npx husky add .husky/pre-commit "npx lint-staged"

//pnpm
pnpm exec husky add .husky/pre-commit "pnpm exec lint-staged"

并且在package.json中添加内容

"lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }

完成！现在git的整个流程如图