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

最新推荐文章于 2024-07-09 14:49:43 发布

web老猴子

最新推荐文章于 2024-07-09 14:49:43 发布

阅读量656

点赞数

文章标签：前端 javascript react.js html

本文链接：https://blog.csdn.net/web220507/article/details/126426512

版权

本文详细介绍了如何使用Vite从0开始搭建一个React组件库，包括开发环境配置、CSS预处理器Sass的使用、eslint规则设定、组件库编译配置、自动生成TS类型文件、样式懒加载与全量加载的实现，以及文档生成和npm发布测试的全过程。

摘要由CSDN通过智能技术生成

🍄前言

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

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

👣目标

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

🌈搭建开发环境

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

🛠️生成模板

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

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

🔩CSS预处理器

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

yarn add sass

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

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

同时根目录下新建.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","selec