记录自己的前端工作流
总结一份自己的前端工作流搭建流程,方便以后使用,创建一个简单的模板,后续放在
npm上创建新内容,方便直接npm下载模板 主要使用技术
- Eslint
- Prettier
- husky
- lint-staged
- commitlint
- commitizen
基础模板代码: template
版本号备注:
- node： 16.14.2
- npm： 8.13.1
Tip：
npm版本须大于等于7.24.2，过低的话可能会导致下面有的命令无法使用，需要手动在package.json中自行设置。
1.代码规范
代码检查工具
-
Eslint
-
项目集成
-
npm i eslint -D npx eslint --init 复制代码 -
init 命令会自动生成 .eslintrc.js
-
代码风格工具
-
prettier
-
项目集成
-
npm i prettier eslint-config-prettier eslint-plugin-prettier -D 复制代码 -
在.eslintrc 中,extend中添加 "prettier" 解决 eslint 和 prettier 的冲突
- 因为eslint-config-prettier新版本更新之后,只需要写一个 "prettierr" 即可,无需多言指令
-
创建 .prettierrc
// 自己配置 { "semi": false, "tabWidth": 2, "trailingComma": "none", "singleQuote": true, "arrowParens": "avoid" } 复制代码
-
2.git规范
Git 有很多的 hooks, 让我们在不同的阶段,对代码进行不同的操作,控制提交到仓库的代码的规范性,和准确性, 以下只是几个常用的钩子
2.1 提交的代码规范
- pre-commit
- 描述: 通过钩子函数,判断提交的代码是否符合规范
2.2 提交的信息规范
- commit-msg
- 描述: 通过钩子函数,判断 commit 信息是否符合规范
2.3 提交的代码影响
- pre-push
- 描述: 通过钩子,执行测试,避免对以前的内容造成影响
工具
-
husky
- 操作 git 钩子的工具
-
lint-staged
- 本地暂存代码检查工具
-
commitlint
- commit 信息校验工具
-
commitizen
-
辅助 commit 信息 ,就像这样,通过选择输入,规范提交信息
安装流程
-
1.安装代码校验依赖
-
npm i lint-staged husky -D npm set-script prepare "husky install" # 在package.json中添加脚本 npm run prepare # 初始化husky,将 git hooks 钩子交由,husky执行 复制代码- 初始化 husky, 会在根目录创建 .husky 文件夹
-
npx husky add .husky/pre-commit "npx lint-staged" 复制代码- pre-commit 执行 npx lint-staged 指令
-
根目录创建 .lintstagedrc.json 文件控制检查和操作方式
-
{ "*.{js,jsx,ts,tsx}": ["prettier --write .", "eslint --fix"], "*.md": ["prettier --write"] } 复制代码
-
-
2.安装提交信息依赖
-
npm i commitlint @commitlint/config-conventional -D npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"' 复制代码-
@commitlint/config-conventional 这是一个规范配置,标识采用什么规范来执行消息校验, 这个默认是Angular的提交规范
类型 描述 build 编译相关的修改，例如发布版本、对项目构建或者依赖的改动 chore 其他修改, 比如改变构建流程、或者增加依赖库、工具等 ci 持续集成修改 docs 文档修改 feat 新特性、新功能 fix 修改bug perf 优化相关，比如提升性能、体验 refactor 代码重构 revert 回滚到上一个版本 style 代码格式修改, 注意不是 css 修改 test 测试用例修改 -
commit-msg 钩子执行 消息校验
-
这里也可以采用自己写的方法,来校验内容, 看下vue@next 的消息提交
-
我们也可以使用自己写的方法,设置的话使用一下指令
-
npx husky add .husky/commit-msg 'node [dir]/filename.js' # 指定目录文件 复制代码
-
-
-
-
3.安装辅助提交依赖
-
npm i commitizen cz-conventional-changelog -D 复制代码- 安装指令和命令行的展示信息
-
npm set-script commit "git-cz" # package.json 中添加 commit 指令, 执行 `git-cz` 指令 复制代码- 编写commit指令
-
npx commitizen init cz-conventional-changelog --save-dev --save-exact 复制代码- 初始化命令行的选项信息,不然没有选项
-
-
4.自定义提交规范
-
npm i -D commitlint-config-cz cz-customizable 复制代码 -
变更 commitlint.config.js 这里采用自己定义的规范,将会覆盖上面那个,所以上面那个可以不用安装
-
增加 .cz-config.js
'use strict' module.exports = { types: [ { value: '✨新增', name: '新增: 新的内容' }, { value: '🐛修复', name: '修复: 修复一个Bug' }, { value: '📝文档', name: '文档: 变更的只有文档' }, { value: '💄格式', name: '格式: 空格, 分号等格式修复' }, { value: '♻️重构', name: '重构: 代码重构，注意和特性、修复区分开' }, { value: '⚡️性能', name: '性能: 提升性能' }, { value: '✅测试', name: '测试: 添加一个测试' }, { value: '🔧工具', name: '工具: 开发工具变动(构建、脚手架工具等)' }, { value: '⏪回滚', name: '回滚: 代码回退' } ], 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 } 复制代码 -
package.json 中,将原来commit配置,变更为自定义配置
-
然后提交会变成这样
-
3.测试
单元测试
- jest
- 测试三部曲
- input&output
配置jest
- 前往 jest 文档,根据需求添加内容
- www.jestjs.cn/docs/gettin…
提交代码的测试运行
-
npx husky add .husky/pre-push "npm test" # 提交代码前,跑一遍测试用例 复制代码