Vite + React 如何从0到1搭建一个开源组件库

🍄前言

日常使用开源的组件库时我们或多或少的都会做一些自定义的配置来符合实际的设计，当这些设计形成一定规模时，设计狮们就会形成一套规范，实施到前端这里就变成了组件库。

本文的目标是从0开始搭建一个面向组件库的基础设施，一起来探索下吧~。

👣目标

• 开发环境
• 组件库编译，需要生成umd和esm模块的组件代码
• 支持按需导入与全量导入
• 组件文档/预览
• 代码格式化和规范检测工具

🌈搭建开发环境

现在的时间点Vue或者React都可以用Vite来进行开发打包，这里有老前辈Vant的尝试我们可以放心使用~。

🛠️生成模板

yarn create vite my-components --template react-ts 
1

这里我们创建生成一套react-ts的应用模板，可以仅保留main.tsx用于组件库的开发调试。

🔩CSS预处理器

CSS预处理器Sass与Less都可以选择，这里用了Sass:

yarn add sass 
1

不需要配置直接用就可以，与它搭配的规则检查可以安装stylelint:

yarn add stylelint stylelint-config-standard stylelint-config-prettier-scss stylelint-config-standard-scss stylelint-declaration-block-no-ignored-properties 
1

同时根目录下新建.stylelintrc:

{"extends": ["stylelint-config-standard","stylelint-config-prettier-scss","stylelint-config-standard-scss"],"plugins": ["stylelint-declaration-block-no-ignored-properties"],"rules": {"no-descending-specificity": null,"no-invalid-position-at-import-rule": null,"declaration-empty-line-before": null,"keyframes-name-pattern": null,"custom-property-pattern": null,"number-max-precision": 8,"alpha-value-notation": "number","color-function-notation": "legacy","selector-class-pa