从零搭建React组件库
文章平均质量分 71
利用react+ts+vite+tailwindcss+dumi+netlify搭建带文档的全流程组件库
henuGM
心要静,才能成为高手
展开
-
第七章:使用Netlify零成本部署组件文档
一开始一共有三个方案:2、Netlify3、VercelGithub Page只支持一个repo发布一个网站,而我们的项目是一个mononrepo项目,后续可能还有其他需要部署的项目,pass掉;通过实操,目前通过vercel部署的网站正常无法访问,翻墙也不行,pass掉;原创 2023-01-04 10:59:16 · 614 阅读 · 3 评论 -
第六章:利用dumi搭建组件文档【前端工程化入门-----从零实现一个react+ts+vite+tailwindcss组件库】
我们把准备好的logo放到docs项目的public的images文件夹中,然后。先安装一下我们的react-ui-teaching。下一章我们通过netlify部署一下文档;原创 2022-11-07 08:30:00 · 1741 阅读 · 0 评论 -
第五章:将组件库发布到npm【前端工程化入门-----从零实现一个react+ts+vite+tailwindcss组件库】
然后我们需要有一个npm的账号:https://www.npmjs.com/signup。像自动化部署这些配置,我会专门拿出一章来讲;原创 2022-11-03 08:00:00 · 639 阅读 · 0 评论 -
第四章:利用Monorepo方式管理组件库生态【前端工程化入门-----从零实现一个react+ts+vite+tailwindcss组件库】
Monorepo 的意思是在版本控制系统的单个代码库包含很多其他项目的代码;Unocss源码就是典型的Monorepo项目;原创 2022-10-24 09:00:00 · 923 阅读 · 0 评论 -
第三章:为组件库添加规范【前端工程化入门-----从零实现一个react+ts+vite+tailwindcss组件库】
本章我们会用 eslint、prettier以及Husky 为组件库添加规范;原创 2022-10-14 08:30:00 · 445 阅读 · 0 评论 -
第二章:引入 Tailwindcss 实现原子化CSS【前端工程化入门-----从零实现一个react+ts+vite+tailwindcss组件库】
原子化CSS是一种CSS的架构方式倾向于使用小巧、用途单一的class定义样式以class定义单一样式的方式,有效减少CSS包的体积。原创 2022-10-12 08:30:00 · 4251 阅读 · 0 评论 -
第一章:实现组件库的MVP【前端工程化入门-----从零实现一个react+ts+vite+tailwindcss组件库】
MVP是什么?MVP是最简化可实行产品;也就是说,这一章我们要实现一个最简的组件库为什么使用vite? 1. 基于 esbuild 实现极速开发 2. 兼容 Rollup 的插件机制与API 3. SSR 支持 4. 旧浏览器支持为什么 Vite 基于 Esbuild可以实现极速开发?原创 2022-10-10 08:00:00 · 2352 阅读 · 0 评论