React 组件库框架搭建
前言
公司业务积累了一定程度,需要搭建自己的组件库,有了组件库,整个团队开发效率会提高恨多。
做组件库需要提供开发调试环境,和组件文档的展示,调研了几个比较主流的方案,如下:
- docz 配置简单,功能相对来说也较完善。我们现在项目是用的umi框架,正好官方也提供了开发库的脚手架,也集成了docz,因此我们决定采用它来开发我们的组件库。
- storybook 功能比较全面,支持自定义webpack配置等特性
- docsifyjs 写文档比较友好,对vue支持比较好,react 用的不是特别多
组件库搭建
monorepo(多包仓库)
现在比较流行的是
monorepo
(多包仓库),我们采用lerna框架去管理开发项目。lerna我认为最主要的功能给我们提供了包的版本管理,快速发布npm等。像鼎鼎大名的babel就是采用这种方式来管理。lerna 初始化项目大家可以看下官方文档,要注意它的两种模式- Fixed/Locked(锁定,固定模式) 默认初始化就是使用的这种方式。此方式包升级相对应的所有包都会升级成新版本
- Independent (独立模式) 支持单独包的改动升级版本
lerna 项目文件目录描述
├── README.md 项目介绍
├── lerna.json lerna 配置文件
├── package.json
├── packages 包目录
│ └── ***-component 具体包文件
└── yarn.lock
创建componet组件库
我们在
packages
文件目录下创建我们的组件库,可以起名为***-component
, 接下来就是初始化项目,可以用umi提供的脚手架去创建,根据文档创建即可。我们介绍下文件目录的用途框架目录
├── bcomponents 存放我们的业务组件
├── components 存放基础组件
│ ├── resource 资源组件
│ └── tag 标签组件
├── index.js 入口文件
├── style 样式文件
│ ├── index.js
│ ├── index.less 入口样式
│ ├── minxins less minxins
│ └── themes 默认主题
├── utils 工具目录
│ └── utils.js 工具类
组件目录
├── resource resource组件文件夹
│ ├── index.js 入口文件
│ ├── index.less less描述文件
│ ├── index.mdx 文档和案例
│ ├── resource.js 组件内容
│ ├── resourceContext.js 组件内容
│ └── resourceGroup.js 组件内容
└── tag tag组件
├── index.js 入口文件
└── index.mdx 文档和案例
开发,打包,发布
我们介绍了框架目录,大家可以按约定去开发。由于 umi-plugin-library 目前开发还不是完善,文档也不是很全。通过查看源码总结了一下命令,包含开发,打包,发布到github pages 上.
yarn dev
启动开发环境yarn build:doc
构建文档yarn deploy:doc
构建文档并发布到github pagesyarn build
构建组件产物
成果展示
结束语
我简单的介绍了组建搭建,搭建的过程中还有许多小细节需要我们注意。我把项目放到了github上,大家有兴趣可以去查看
React 组件库框架搭建的更多相关文章
- 七个不可错过的React组件库与开发框架
React是如今最火爆的前端技术,而React最棒的一个特点就是有大量功能丰富的组件库和开发框架可用.从按钮到卷轴到工具条,应有尽有,而且这些组件可以各行其是,也可以组装成复杂的UI,你也可以把UI分 ...
- 如何快速构建React组件库
前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...
- Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo
前两篇文章分享了基于 vite3 vue3 的组件库基础工程 vue3-component-library-archetype 和用于快速创建该工程的工具 yyg-cli,但在中大型的企业级项目中,通 ...
- Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境
前文已经初始化了 workspace-root,从本文开始就需要依次搭建组件库.example.文档.cli.本文内容是搭建 组件库的开发环境. 1 packages 目录 前面在项目根目录下创建了 ...
- React组件库集锦及学习视频
[转载]https://www.rails365.net/articles/react-zui-hao-de-ui-zu-jian-ku-ji-jin 这里有一篇讨论,说了哪个才是 React 最好的 ...
- Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root
上文已经搭建了 pnpm + monorepo 的基础环境,本文对 workspace-root 进行初始化配置,包括:通用配置文件.公共依赖.ESLint. 1 通用配置文件 在项目 根目录 下添加 ...
- React组件库
图表组件库:Recharts(React和D3构建的图表库) UI组件库:react-bootstrap
- Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构
在前一篇文章中分享了搭建组件库的基本开发环境.创建了 foo 组件模块和组件库入口模块,本文分享组件库的样式架构设计. 1 常见的 CSS 架构模式 常见的 CSS 架构模式有很多:OOCSS.ACS ...
- [翻译]怎么写一个React组件库(二)
本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27434018,喜欢本文的就去知乎点个赞支持下吧- 引言 该系列文章将通过创建一个组件库来引导你学习如何构建自己的组 ...
随机推荐
- nargin与varargin的用法
nargin是用来判断输入变量个数的函数,这样就可以针对不同的情况执行不同的功能.通常可以用它来设定一些默认值.如下例所示: 函数文件 examp.m function fout=examp(a,b, ...
- PAT A1120 Friend Numbers (20 分)——set
Two integers are called "friend numbers" if they share the same sum of their digits, and t ...
- java 适配器模式(adapter pattern)
适配器就是一种适配中间件,它存在于不匹配的二者之间,用于连接二者,将不匹配变得匹配. 场景:电脑读取内存卡中的内容,内存卡是没有办法直接插在电脑的USB接口上,那就不需要一个转换器. 下面的例子实现了 ...
- OpenGL初学:安装配置与第一个程序
OpenGL初学:安装配置与第一个程序 2014年10月12日 12:37:03 process-z 阅读数:12413 标签: opengl安装教程 更多 个人分类: OpenGL 计算机图形学 ...
- 4.5《想成为黑客,不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)—第四章小结
本章相关重要命令总结在Table 6. 命令 描述 示例 mkdir <name> 创建某目录 $ mkdir foo pwd 显示当前所在目录 $ pwd cd <dir> ...
- Vue-认识状态管理vuex
vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试,可以多个组件共享状态.简单来说,就是共享的状态用state来存放,用mutations来操作state,但是 ...
- 利用数据库触发器让字段与自增长Id相关联
十年河东,十年河西,莫欺少年穷 学无止境,精益求精 今天是数据库脚本类的代码,所以不想过多阐述 如下数据表: create table Card( Id ,) primary key, CardNo ...
- springmvc 解决 controller 中出现死循环并 stackoverflow 的问题
这是因为这个controller中的方法返回值为void类型,且没有request response这类衍生的重定向,或者返回值为String,但是是null等等的情况,都会引起死循环,然后stack ...
- 使用ajax方法实现form表单的提交
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...
- zabbix中配置当memory剩余不足20%时触发报警
在zabbix中默认当内存剩余量不足2G的时候触发报警,并没有使用百分比来触发如下: 现在需要配置:当memory剩余不足20%时触发报警,具体操作方法如下: 1)创建itemConfiguratio ...