1、搭建组件库思考
需要思考以下几个问题:
- 样式解决方案
- 代码结构
- 组件分析编码
- 测试用例
- 代码打包发布
- CI/CD,生成文档
2、初始化项目
我们使用vite来初始化一个react+ts的项目文件// 项目初始化
npm init vite@latest
cd component-library
npm install
npm run dev
添加项目限制
// 安装eslint
yarn add eslint --dev
// 安装husky和lint-staged:
npm install --save-dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"
// 提交规范
npm install --save-dev @commitlint/{config-conventional,cli}
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
3、样式解决方案
常见的样式解决方案有:
- CSS in js
- Inline CSS
- Styled Component
- Sass/Less
本次我们选择Sass/Less,它提供了变量,函数,继承等等;
4、项目整体结构
- components:组件相关逻辑定义
- styles:全局样式
- hooks:自定义hooks相关
- utils:助手函数等
5、样式定义
一个组件库当然不能缺少相关的样式系统,分为以下3个方面;
- 基础色
- 字体
- 边框阴影