如何搭建一个完美的组件库?

Souleigh ✨ 等级 488 0 0

如何做一个组件库?本篇文章不会讲一个小的组件如何设计,而是会整体讲一个“逼近完美”的组件库是怎么设计的。

组件库划分

要想设计一个灵活好用的组件库,第一步就是要合理的划分组件,组件的粒度足够细,边界足够清晰,这样才能最大程度地复用组件。

如何搭建一个完美的组件库?

从一张图介绍各种组件的区别,基础组件,也就是与业务功能无关的组件,比如 antd/fusion 中提供的组件,upload, dialog 等等这些。但是只有这些基础组件是远远不够的。

比如,你可能会经常遇到这样的场景:

  • 前端开发: 设计师又造“新轮子”了, 为什么就不能本本份份使用 fusion 或者 antd 的基础样式呢?
  • 设计师: “我觉得这个基础样式没有灵魂,我觉得这样比较好看”

这种时候,业务组件就有用处了。此时可以利用 fusion 或者 antd 的基础组件,进行二次封装,形成自己产品的独特组件,也称“业务独特领域的组件”。

但事实上,还是有很多场景,他可能会频繁变更,如果开发一个组件,里面的传参等等都可能会不停变更,此时就可以直接用“区块”来实现。直接提供一个组件代码模版,让使用方直接复制粘贴,然后在里面修改他的内容。

再往高一点,页面级别,也称为模版, 比如“登录页”,可能不同产品之间,这个登录页中间一部分逻辑是变化不可控的,那可以直接提供一个页面模版,供使用方直接使用, 比如 页面模版[1]

好了, 通过上面的讲述,我们知道在什么场景下该使用什么组件,知道如何划分组件可以让我们的组件库更加灵活强大,接下来就要讲一下如何开发一个组件了。

组件开发

  • 设计师: 哎,我这里的间距要从 14px 改成 16px, 然后字体颜色改成 ***
  • 前端开发: 我…………

难道一个前端每天都要在这调整样式吗?那未免太无趣了…… 此时一个主题变量就很重要了。

1. 主题变量

我们可以提前跟设计师约定, 比如主字体大小多少,主颜色是什么,然后设计师出稿时按照设置的变量来出。

这样前端跟设计师之间就通过一个 scss 变量来衔接,搭建一个主题配置的网站,如下【fusion 主题配置】,在开发业务组件的时候,注入该网站配置的相关变量。

如何搭建一个完美的组件库?

设计师可以在这里设置他想要的变量,最后生成对应的 scss 变量,如下截图:

如何搭建一个完美的组件库?

经过下面的操作流程,在实际项目中,前端开发只需要重新编译构建项目即可修改组件样式, 真正从样式中解放出来~

如何搭建一个完美的组件库?

好了,除了 css 样式,做一个组件还需要注意以下一些事情。

2. 如何让一个 npm 包体积最小


 "peerDependencies": {
    "react": ">=16.12.0",
    "react-dom": ">=16.12.0"
  }

如上的配置,可以让组件库下的 node_modules 不安装 react,同时指定组件库使用方需安装的 react/reactDOM 的版本。

如何搭建一个完美的组件库?

  1. 配置对应的 externals

3. 文档生成

之前分享过一篇 react 文档自动生成的文章, 感兴趣可以看一下

4. commit 规范 & changelog 生成

首先,使用 husky 插件, 在 pre-commit 阶段添加钩子,限制该项目提交的 git commit 信息。

之后,我们再利用 conventional-changelog[2] 插件, 把历史 commit 信息进行筛选提炼,自动化生成统一规划的 CHANGELOG 文件。

5. 打通设计师&前端工具

如果前端埋头造轮子,相信我,你们的设计师依然不会放过你们,因为他不知道你们造了什么轮子

所以此时实现一个 sketch 插件,将实现的组件同步到 sketch 插件中,这样每次设计师就可以看着已有的组件来拖拽生成设计稿。大大减少前端&设计师的沟通。如下图:

如何搭建一个完美的组件库?

实现上面一个完整的链路,可以大大提升前端的开发效率。不过一个公司如果想 从 0 搭建这样一套完整的组件库,务必要投入大量的人力。

收藏
评论区

相关推荐

如何搭建一个完美的组件库?
如何做一个组件库?本篇文章不会讲一个小的组件如何设计,而是会整体讲一个“逼近完美”的组件库是怎么设计的。 组件库划分 要想设计一个灵活好用的组件库,第一步就是要合理的划分组件,组件的粒度足够细,边界足够清晰,这样才能最大程度地复用组件。 (https://imghelloworld.osscnbeijing.aliyuncs.com/i
学完了C++语法之后该学什么??(数据库篇)
数据库与中间件 主要是MySQL、MongDB、Redis、Nginx等; 在大学的课程里,一般都会开设一门数据库的课程,不过这门数据库是没有针对某一种数据库语言的(例如 MySQL、SQlite)。不过我这里只讲 MySQL,因为最频繁。数据库不在多。 把MySQL学好,还是特别重要的,千万不能停留在会用的层面上,而是应该
Flutter如何引用第三方库并使用
Flutter官网点击访问(https://link.jianshu.com/?thttps%3A%2F%2Fflutter.io) 如何引用并安装第三方库 pubspec.yaml管理第三方库 在pubspec.yaml中添加第三方库名称及版本号。 例如添加第三方库english_words dependencies: flut
一文搞懂什么是HTTP与HTTPS
(https://blog.csdn.net/petterp/article/details/102779257)Http与Https的区别。 在最近的开发中,深感网络相关基础知识薄弱,于是趁周末好好总结一
20 张图彻底弄懂 HTTPS 的原理
前言 近年来各大公司对信息安全传输越来越重视,也逐步把网站升级到 HTTPS 了,那么大家知道 HTTPS 的原理是怎样的吗,到底是它是如何确保信息安全传输的?网上挺多介绍 HTTPS,但我发现总是或多或少有些点有些遗漏,没有讲全,今天试图由浅入深地把 HTTPS 讲明白,相信大家看完一定能掌握 HTTPS 的原理,本文大纲如下: HTTP 为什么不安全
Android:SQLiteOpenHelper类(SQLlite数据库操作)详细解析
Android:SQLiteOpenHelper类(SQLlite数据库操作)详细解析 前言 SQLite数据库操作在Android开发中非常常用 今天我将带大家全面了解关于SQLite数据库的操作(增、删、查、改) image(https:/
Go语言学习教程:管理员登录功能开发
学习完了数据库操作的知识以后。本节内容,我们将实现管理员登陆功能,涉及到多个模块的代码实现和逻辑处理,以及数据库表的操作,都将在本节内容中进行实现。 (https://blog.csdn.net/qfzhangxu/article/details/89021910)管理员结构体定义 首先我们要定义管理员这个实体的结构体,我们定义为Admin:
VUE2 源码中 一个有趣的小动画
今天在vue2源码发现了一个有意思的小动画,挺有趣的,用 svg 和 Dynamics.js 动画库完成,啥也不说,先看看效果 一、看效果 GIF 2021319 171028(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/96096e7bd88b170e5846ae09
数据库系统教程-简答题-合集
数据库系统教程简答题合集 教材参考的是 《数据库系统教程》(第三版)施伯乐 复试的最后两天了,临时抱抱佛脚!加油! (一) 数据库概论 1.简述什么是数据库以及数据库系统的主要特点答: 数据库是按照数据结构来组织、存储和管理数据的仓库。是一个长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。 数
数据库运维做些什么?
一. 数据库生命周期 结合软件生命周期、项目的开展,数据库的生命周期大致可分为这么几个阶段。 (https://imghelloworld.osscnbeijing.aliyuncs.com/8552b8c2942bb8ce23
git 本地代码提交到远程仓库
git 将本地代码添加到远程仓库 1. 本地初始化使用git init进行初始化可以使用ls a就可以看到.git文件 2.创建远程仓库点击复制仓库地址 3. 连接远程仓库shell git remote add origin https://gitee.com/test/test.git 4. 将远程仓库的文件pull到本地git pull rebase
如何在React Native和Expo中掩盖Text和TextInput组件
在本文中,我将向您展示如何在React Native和Expo中使用自定义蒙版,可用于iOS,Android和Web!我们将使用一个名为库,这是一个没有本机代码的完整javascript库,然后您可以在React Native环境的所有CLI中使用。](https://res.cloudinary.com/practicaldev/image/fetch/s
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
60行Python代码开发在线markdown编辑器
本文转载自公众号【python大数据分析】,详情可以点击上方卡片,关注该公众号,获取更多好文推荐。 ❝ 本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes ❞1 简介这是我的系列教程「Python+Dash快速web应用开发」的第六期,在上一期的文章中,我们完成了对
git基本操作
一、Git下载安装1、git官网:https://gitscm.com/2、官网下载较慢也可以去找国内镜像:https://npm.taobao.org/mirrors/gitforwindows/3、安装完成后鼠标右键出现以下标志代表安装完成:二、git上传代码到远程仓库(以coding为例)1、在磁盘本地创建一个git仓库,如下图创建一个文件夹gitcs