[《抛开脚手架，徒手搭建 react 项目（一）》](juejin.cn/post/739816… ")我们用webpack搭建了一个react项目，引入了typescript，用Babel编译，还用webpack-merge拆分了我们的配置文件。
《抛开脚手架，徒手搭建 react 项目（二）》我们在项目里面引入了eslint，还介绍了打开服务的五种方法。尤其重要的是 nginx，要你在本地体验一把线上奔跑的感觉。
《抛开脚手架，徒手搭建 react 项目（三）》我们在项目里面引入了 stylelint、还有husky相关工具，轻松实现git commit的时候，对代码格式和提交信息做具体的检测。
《抛开脚手架，徒手搭建 react 项目，webpack打包优化篇（四）》亲手测试并整理了六点减少打包时间的手段。
抛开脚手架，徒手搭建 react 项目，webpack打包优化篇（五） 亲手测试并整理了六点能够缩减打包体积的手段
《webpack插件汇总地址》 帮我总结好了，各种各样的插件。
点赞 + 收藏 === 学会🤣🤣🤣
1.stylelint
Stylelint 本身不提供自动缩进功能，因为它主要是一个样式代码质量检查工具。
文档： webpack.docschina.org/plugins/sty…
npm install --save-dev stylelint stylelint-webpack-plugin stylelint-config-standard
设置配置文件.stylelintrc.js
module.exports = {
// 从标准配置中继承规则
extends: ['stylelint-config-standard'],
// 规则配置
rules: {
// 禁用注释前的空行规则
'comment-empty-line-before': null,
// 禁用声明前的空行规则
'declaration-empty-line-before': null,
// 指定函数名的大小写为小写
'function-name-case': 'lower',
// 禁用选择器特异性递减规则
'no-descending-specificity': null,
// 禁用无效的双斜杠注释规则
'no-invalid-double-slash-comments': null,
// 指定规则前需要空行
'rule-empty-line-before': 'always',
},
// 忽略检查的文件或文件夹
ignoreFiles: ['node_modules/**/*', 'build/**/*'],
};
配置webpack.config.js，在webpack里面集成stylelint-webpack-plugin，其目的是打包的前想检测css代码。
const StylelintPlugin = require('stylelint-webpack-plugin');
plugins: [
.....
new StylelintPlugin({
files: ["src/**/*.{vue,scss,css,less}"], // 指定要检查的文件
fix: false // 是否自动修复一些样式错误
})
],
如果你想要在写代码的时候，样式自动格式化，就要安装vscode的styleLint插件
然后在vscode的设置文件setting里面配置一下
测试下看看
如果你想要你自己配置的eslint和styleLint变成项目共有的，就在项目的顶层创建.vscode\settings.json文件，然后它就会随项目被保存到github上去，这样所有人都可以有整个文件了。
2.postcss-loader
设置样式兼容性问题，利用 postcss
npm install --save-dev postcss-loader autoprefixer
配置webpack.config.js文件
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.(scss|css)$/,
use: [
'style-loader',
'css-loader',
'postcss-loader', // 添加postcss-loader
'sass-loader' // 如果是Sass/SCSS文件
]
}
]
}
// ...
};
创建postcss.config.js文件
import autoprefixer from 'autoprefixer';
export default {
plugins: [
autoprefixer
]
}
package.json里面配置
"browserslist": [
"defaults",
"not ie < 8",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
],
测试，你可以写个样式，打包测试也可以写个node文件测试，比如
完整代码
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';
const css = 'a { transition: color 1s; }';
postcss([autoprefixer])
.process(css)
.then(result => {
console.log(222222222);
console.log(result.css);
});
3.husky
husky 是 gitkooks 实现的工具，它允许开发者轻松地在各种Git事件触发时运行脚本。例如，在提交之前（pre-commit）、推送之前（pre-push）、或者在提交信息被写入后（commit-msg）等。
husky是个 git 梯子，lint-staged 是个集成器
注意事项：测试husky之前要确保你的项目已经被git托管了，如果没有，你执行git的命令就会报错
解决办法：`git init`
安装husky
npm install husky@9.1.1 -D
启用 Git 钩子，执行下面这个命令后，Husky 会自动设置 Git 钩子。很多博文说需要执行的命令是npx husky install或者npx husky add但是执行他们都会报命令已经被废弃，这个和版本有关系，所以husky@9.X使用npx husky install即可。
npx husky init
产生下图文件
测试husky
此时说明husky成功捕获commit钩子。
4.lint-staged
lint-staged 是一个在提交代码之前运行检测的工具。当开发执行git commit 时，lint-staged 会对暂存区的文件进行代码风格检查器（如ESLint、Prettier）、代码格式化工具或测试套件等。
安装 lint-staged
通常husky与lint-staged搭配使用，lint-staged用于让eslint仅对添加到了暂存区的文件校验，避免了不必要的每次提交时eslint全局校验。
npm i lint-staged@15.2.2 -D
配置package.json，7有的博文说要加下面这个
"husky": {
"hooks": {
"pre-commit": "lint-staged",
}
},
测试发现并不需要，直接加命令和配置即可
{
...省略
"scripts": {
"prepare": "husky",
"lint:lint-staged": "lint-staged"
},
....省略
"lint-staged": {
"src/**/*.{ts,tsx,js,jsx}": [
"eslint --config .eslintrc.js"
],
"src/**/*.{css,less,scss}": [
"stylelint --config .stylelintrc.js"
]
"*.{ts,tsx,js,json,html,yml,css,less,scss,md}": [//可选的
"prettier --write"
]
},
}
在.husky/pre-commit配置npm run lint:lint-staged
测试lint-staged
lint——staged是对git add 缓存区里面的数据进行检测，如果缓存区没有数据，那么就会报错，
所以先执行git add . 再执行 npx lint-atsged
可以看到commit后实际执行了package.json中scripts里的"lint:lint-staged"指令，该指令执行的就是package.json中lint-staged配置的内容
通过上面的步骤，就完成了lint-staged的配置，这个时候再进行 git 提交时，将只检查暂存区（staged）的文件，不会检查项目所有文件，加快了每次提交 lint 检查的速度，同时也不会被历史遗留问题影响。通过这样的约束让我们定义的规则规范大家都能去遵守，共同维护代码的质量。
5.commitlint
husky帮我们在提交的时候模拟git钩子，但如果要配置提交时候的message格式校验，则需要commitlint 的帮助。
commitlint 是：我们在执行 git commit 时时候，帮我们检查 message 是否符合规范。
现在我们基本都遵从的 Angular 的提交规范： 就是这个@commitlint/config-conventional。
安装
npm i @commitlint/cli @commitlint/config-conventional -D
创建配置文件：.commitlintrc.js
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
[
'build',
'ci',
'chore',
'docs',
'feat',
'fix',
'perf',
'refactor',
'revert',
'style',
'test',
'addLog',
],
],
},
};
打开.husky\_\commit-msg 增加一个git钩子，意思就是在执行git的时候才去做这个事情
npx --no-install commitlint --edit "$1"
有得博文说要在package.json里面配置git钩子，其实不需要。我们就用不加的测试看看
"commit-msg": "commitlint --config .commitlintrc.js -E HUSKY_GIT_PARAMS"
测试commitlint
commitlint的替换方案：
其实也不必需要commitlint，利用husky可以在commit的时候获取message，可直接使用正则表达式来校验message是否合格以此控制commit是否继续提交
先去掉以上关于commitlint的操作，回到最开始的时候。
仍然是 .husky，在-目录找到commit-msg文件，增加以下内容：
#!/usr/bin/env sh
# npx --no-install commitlint --edit "$1"
commit_msg=`cat $1`
msg_re="(^(feat|fix|docs|style|refactor|test|chore|revert)(([A-Z]+-[0-9]+)): .{1,100})|(^Merge .*branch [\s\S]*)|(^Revert [\s\S]*)"
if [[ ! $commit_msg =~ $msg_re ]]
then
echo -e "Commit message does not follow the pattern: $msg_re , eg:\nfeat(CARCN-1479): add comments\nfix(CARCN-1478): handle events on blur (close #28)\n Please reference the git commit documentation : https://porschedigital.atlassian.net/wiki/spaces/TECHCN/pages/6496256003/Git+Commit+policy+including+Frontend+and+Backend"
# 异常退出
exit 1
fi
其中$1是打印出来是.git/COMMIT_EDITMSG，用cat $1执行后得到的就是commit时候输入的message内容。
测试
6.Commitizen
git提交的时候，好的文案可以帮我更快，更好的理解项目，找到队友每次提交都干了什么，如果需要回退，那就可以根据文案准确无误的找到分支。
Commitizen是一个基于命令行的交互式工具，它可以帮助开发者规范化提交Git提交信息，符合Angular Commit Message Conventions的规范，从而更好地管理代码变更历史。
Commitizen提供了一个友好的命令行交互界面，让开发者根据规范选择提交信息的类型、影响范围等内容，自动生成符合规范的Git提交信息。
Commitizen可以与Git结合使用，使得开发者可以使用commitizen命令代替git commit命令提交代码变更，并且生成的提交信息格式更加规范化和易于管理。
cz-conventional-changelog是一个规范库，就是你提交的时候，可以从这个库里面选择你要做的事情。
安装
npm install commitizen -D
npm install cz-conventional-changelog -D
在pageage.json中增加更改commitizen的配置，并增加脚本
"config":{
"commitizen":{
"path":"node_modules/cz-conventional-changelog"
}
}
"scripts":{
commit:"git-cz"
}
测试
执行npm run commit
执行git commit -m "dddd"
我们发现git的时候居然没有调用Commitizen ，那是不是玩了个寂寞？而且它还是英文的，我就看的不爽咋办？搞个中文的呀！有不爽就要有反叛。
7.cz-customizable 优化Commitizen
cz-customizable 是 Commitizen的一个插件，可以帮助开发者自定义符合Angular Commit Message Conventions的提交信息格式和内容。
安装
npm install cz-customizable --save-dev
package.json 中,将原来commit配置,变更为自定义配置
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
}
commitlint.config.js
module.exports = {
extends: ['cz'],
rules: {},
};
增加 .cz-config.js
'use strict';
module.exports = {
types: [
{value: 'feat', name: '✨新增: 新的内容'},
{value: 'fix', name: '🐛修复: 修复一个Bug'},
{value: 'docs', name: '📝文档: 变更的只有文档'},
{value: 'style', name: '💄格式: 空格, 分号等格式修复'},
{value: 'refactor', name: '️♻️重构: 代码重构，注意和特性、修复区分开'},
{value: 'perf', name: '️️⚡️性能: 提升性能'},
{value: 'test', name: '✅测试: 添加一个测试'},
{value: 'build', name: '🔧工具: 开发工具变动(构建、脚手架工具等)'},
{value: 'rollback', name: '⏪回滚: 代码回退'},
{value: 'addLog', name: '👨🏻💻添加log: 代码回退'},
],
scopes: [
{name: 'leetcode'},
{name: 'javascript'},
{name: 'typescript'},
{name: 'Vue'},
{name: 'node'},
],
// it needs to match the value for field type. Eg.: 'fix'
/* scopeOverrides: {
fix: [
{name: 'merge'},
{name: 'style'},
{name: 'e2eTest'},
{name: 'unitTest'}
]
}, */
// override the messages, defaults are as follows
messages: {
type: '选择一种你的提交类型:',
scope: '选择一个scope (可选):',
// used if allowCustomScopes is true
customScope: 'Denote the SCOPE of this change:',
subject: '短说明:\n',
body: '长说明，使用"|"换行(可选)：\n',
breaking: '非兼容性说明 (可选):\n',
footer: '关联关闭的issue，例如：#31, #34(可选):\n',
confirmCommit: '确定提交说明?(yes/no)',
},
allowCustomScopes: true,
allowBreakingChanges: ['特性', '修复'],
// limit subject length
subjectLimit: 100,
};
测试
配置使用git commit走自定义配置
更改husky/_/prepare-commit-msg钩子，如下:
#!/bin/bash
exec < /dev/tty && node_modules/.bin/cz --hook || true
测试
把之前commit-msg里面的代码干掉，要他用commitlint检测，在commit-msg里面加入下面的代码，注意的是#!/usr/bin/env sh不要删除，删除就找不到这个文件了。
#!/usr/bin/env sh
npx --no-install commitlint --edit "$1"
然后测试
你的提交文案最后变成了这个： fix(custom): ceshi
8.关于git检测最佳实现方案
关于git的最佳实现方案是：husky，lint-staged，commitizen， cz-customizable，commitlint。
husky是git的钩子，必须存在。
lint-staged 是把eslint，stylelint检测工具勾进来的工具，一旦代码格式出问题，它就会阻止commit。
commitizen 是自动化提供git commit 提交文案的工具
cz-customizable 是自定义提交文案的工具
commitlint是检测你提交文案是否正确的工具。
执行npm init @eslint/config@latest 等价于npm i eslint -D 和 npx eslint
