1、搭建组件库思考

需要思考以下几个问题:

  • 样式解决方案
  • 代码结构
  • 组件分析编码
  • 测试用例
  • 代码打包发布
  • CI/CD,生成文档

    2、初始化项目

    我们使用vite来初始化一个react+ts的项目文件
    1. // 项目初始化
    2. npm init vite@latest
    3. cd component-library
    4. npm install
    5. npm run dev

添加项目限制

  1. // 安装eslint
  2. yarn add eslint --dev
  3. // 安装husky和lint-staged:
  4. npm install --save-dev husky lint-staged
  5. npx husky install
  6. npm set-script prepare "husky install"
  7. npx husky add .husky/pre-commit "npx lint-staged"
  8. // 提交规范
  9. npm install --save-dev @commitlint/{config-conventional,cli}
  10. echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
  11. 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:助手函数等

image.png

5、样式定义

一个组件库当然不能缺少相关的样式系统,分为以下3个方面;

  • 基础色
  • 字体
  • 边框阴影

将他们定义在variables.scss文件中;
image.png

6、代码地址

https://github.com/linhexs/component-library/tree/main