1、搭建组件库思考
需要思考以下几个问题:
- 样式解决方案
- 代码结构
- 组件分析编码
- 测试用例
- 代码打包发布
- CI/CD,生成文档
2、初始化项目
我们使用vite来初始化一个react+ts的项目文件// 项目初始化npm init vite@latestcd component-librarynpm installnpm run dev
添加项目限制
// 安装eslintyarn add eslint --dev// 安装husky和lint-staged:npm install --save-dev husky lint-stagednpx husky installnpm 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.jsnpx 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个方面;
- 基础色
- 字体
- 边框阴影
