DevDoc - KunlunDesign
项目组组名 bug丢给别的队
项目组组号 114514
项目简介 大项目二-组件库
项目名称 Kunlun Design
名称寓意
昆仑山为万山之山，其他不必多说
文章是自己实操总结出来的，当然也会挂出项目开发时参考的文章地址，如果有侵权，请联系删除
不得不说踩了很多坑也学了很多东西，可能最后的成果与最开始的目标相差不少，但是中间的过程和所得出来的经验，是任何成果都比不上的（好呗，就是自己菜呗，做不出理想的东西呗，别骂了别骂了，在学了在学了）
当然文章我会控制着量去发，我们的开发进度肯定比文章发布快，毕竟不能给自己养竞争对手嘛
ps:文章中可能有些坑，当然人家原文坑比我还多，我已经填了很多了，我只是边开发边写文档，有时候改了什么东西就忘记改文档了 嘻嘻，加油加油哈哈哈哈
一、环境搭建
参考文章 手把手从零搭建一个 vue3 组件库 (一)前端开发-小通的博客-CSDN博客vue3组件库搭建
我用lerna也搭了一个，但是nana篇文章没后续了，而且网上基本都是vite的，所以就转战vite了，因为还没学会走呢，怎么去跑嘞哈哈哈
1、基础配置
mkdir kunlun-design
cd kunlun-design
pnpm init
新建 packages目录，用来存放组件
创建 pnpm-workspace.yaml 文件，指定 packages
packages:
- 'packages/*'
安装 typescirpt 并初始化 tsconfig.json 文件
pnpm add typescript -D -w
npx tsc --init
{
"compilerOptions": {
"baseUrl": ".",
"target": "ESNext",
"sourceMap": false,
"module": "ESNext",
"esModuleInterop": true,
"strict": true,
"jsx": "preserve",
"types": ["node"],
"rootDir": ".",
"moduleResolution": "node",
"declaration": true
}
}
2、eslint + prettier配置
pnpm add prettier -D -w
根目录创建 .prettierrc.js
module.exports = {
semi: false, //行尾是否使用分号 默认为true
singleQuote: true, //字符串是否使用单引号，默认为true
printWidth: 100, //一行的字符数，如果超过会进行换行，默认为80，官方建议100-120其中一个数
trailingComma: 'none', //是否使用尾逗号，有三个可选值<none,es5,all>
arrowParens: 'avoid', //单参数箭头函数参数周围使用圆括号 (x)=>x avoid相当于false always相当于true
endOfLine: 'lf', //尾行结束形式
tabWidth: 4, //缩进长度
useTabs: false //使用空格代替tab缩进
}
pnpm add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D -w
配合prettier
当ESlint的规则和prettier的规则相冲突时，就会发现一个尴尬的问题，用其中一种来格式化代码，另一种就会报错。prettier官方提供了一款工具 eslint-config-prettier 来解决这个问题，本质上这个工具其实就是禁用掉了一些必要的以及和prettier相冲突的ESlint规则
pnpm add eslint-config-prettier eslint-plugin-prettier -D -w
pnpm add eslint-plugin-vue -D -w #vue
根目录创建 .eslintrc.js
module.exports = {
parser: 'vue-eslint-parser',
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended',
'prettier',
'plugin:prettier/recommended'
],
env: {
browser: true,
es2021: true,
commonjs: true
},
plugins: ['@typescript-eslint', 'prettier', 'vue'],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser'
},
rules: {
'prettier/prettier': 'error',
'no-extra-semi': 'off',
'@typescript-eslint/camelcase': 'off',
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-extra-semi': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-empty-interface': 'off'
}
}
package.json 中添加
{
"name": "kunlun-design",
"version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^8.31.0",
"prettier": "^2.8.3",
"typescript": "^4.9.4",
"vue": "^3.2.45"
}
}
3、husky lint-staged
husky 代码提交前可以执行自定义git hooks
在代码提交之前，进行代码规则检查能够确保进入git库的代码都是符合代码规则的。但是整个项目运行lint速度会很慢，lint-staged能够让lint只检测暂存区的文件，所以速度很快
pnpm add husky lint-staged -D -w
一定要记得先创建git仓库
执行 npx husky install 创建.husky目录，该目录下有一个 pre-commit 文件在每次提交代码的时候会执行，可以修改里面的运行脚本，自定义提交需要做的工作，如果没有 pre-commit 文件可以手动创建
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged
在 package.json 中添加 lint-staged 配置
"lint-staged": {
"*.{js,jsx,vue,ts,tsx}": [
"eslint --ext .ts packages/**/*.ts",
"eslint --ext .ts packages/**/*.ts --fix"
]
}
4、commitlint
commitlint 统一提交时的message
pnpm add @commitlint/config-conventional @commitlint/cli -D -w
根目录新建commitlint.config.js
module.exports = {
extends: ['@commitlint/config-conventional']
}
添加钩子 .husky/commit-msg
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit $1
现在我们试着提交一下代码
git add .
git commit -m 'test'
这样是会报错的，而且记得先
pnpm run prettier
pnpm run lint
将代码整规范之后再
git add .
git commit -m 'feat: 环境搭建'
