前言

随着vue/react这类以数据驱动为主的web框架的始终完善和壮大，越来越多的前端团队开局着手搭建外部的组件库。只管目前市面上曾经有很多性能弱小且完善的组件库供我们经常使用，比如基于react的开源组件库ant-design，material，又比如基于vue的开源组件库elementUI，iView等。

我们在开发治理系统或许中台产品时，齐全可以经常使用这种第三方库来开发，由于首先其服务的用户个体比拟小众，普通是企业或许经营人员来经常使用，重点在于性能和业务，所以在B端产品比拟适宜；另一点就是设计要求相关于C端产品会低一些，由于B端产品或许治理系统格调一致便捷反而会降落经常使用者的学习老本。所以关于上述状况，我们齐全可以经常使用ant-design-pro或许element-admin-vue这类集成治理框架开开发。

我们经常使用第三方组件库搭建一个企业级运行是齐全没有疑问的，然而另一方面，随着我们对用户体验以及网站性能的要求越来越高，流量及金钱，速度即霸道，关于专一于做C端的企业来说，尽或许的缩小用户期待才干留住更多的用户，比如我们在某宝，某东上买一个商品，结果我们花了一分钟商品列表还没有进去（描画的有点夸张），这种状况下客户可有或许间接选用某拼了。很显著像ant-design和elementUI这样的组件不适宜做C端产品，由于体积太大了，除非用高性能主机或许其余形式补偿。所以说驳回轻量级组件库关于C端名目来说有以下几点好处：

然而开发组件库还是须要投入期间和老本的，毕竟这物品不是每个团队都玩的起的。说了这么多，接上去我们就来剖析和成功一个团队外部的组件库吧。

你将收获

注释

1.开发组件库的几种形式

目前我们开发组件库的形式有很多，只需依据npm发包准则去性能就好了，我们可以用webpack自己大家一个library，也可以间接经常使用create-react-/vue-cli3来极速变革一个组件库的脚手架，或许驳回之前比拟火且智能集成tree-shaking的rollup，这些形式都可以搭建我们组件库的脚手架。关于如何经常使用webpack4.0和rollup，可以参考笔者的以下几篇文章：

其实还有一种最快的形式就是间接去ant-design或许elementUI的github仓库，把代码copy上去改老自己的组件库脚手架，当然，这也不是随意就能改好的，假构想尝试这种方案，倡导大家先学好typescript和webpack。

笔者这里驳回的是目前比拟盛行的工具链umi，umi的father专门是提供组件库或许工具库打包的集成工具，我们只须要更改性能文件就能轻松搭建一款自带说明文档的组件库。笔者接上去会具来教大家如何经常使用它。

2.前端组件系统设计思绪和形式

以上是笔者画的一个粗陋的分层图，我们可以看到最底层的是我们的基础视图组件，它是下层修建的基石。关于一个蕴含很多子系统的复杂的名目系统来说，要想设计一个好的架构，第一步就是正当划分组件，组件的粒度拆成的足够细，这样才干最大限制的复用组件。

关于任何一个复杂系统来说，最关键的就是成功盘根错节的业务性能，然而不同模块或许子系统之间很多业务往往是相通的或许相似的，假设这个时刻我们每个页面关于成功相似的业务场景都去重复去写一遍业务代码，那齐全是没必要的，关于可保养性来说也是一种打击，所以基于这种场景我们的业务组件就很有必要出场了。我们可以把性能或许需求相似的无机体封装成一个业务组件，并对外泄露接口来成功灵敏的可定制性，这样的话我们就可以再不同页面不同子系统中复用雷同的逻辑和性能了。

同理，不同页面中往往有或许产生视觉或许交互齐全相反或许相似的区块，为了提高可复用性和提高开发效率，我们往往会基于基础组件和业务组件再启动一次性封装，让其成为一个独立的区块以便间接复用。

经过这样一层层封装，我们就逐渐搭建了一套完整的组件化系统，基于这种形式的开发往往也是一个好的前端架构的开局。但要留意一点就是高档次的组件必定会依赖低档次的组件，然而低档次的组件无法以蕴含高档次的组件。（听起来有点像rudex的单向数据流规律），他们的相关就如同下图：

3.组件库的划分及设计思绪

组件库的划分其实可以参考成熟组件库划分。由于业务组件和区块划分齐全取决于不同公司的实践名目状况，这里不能构成一套一致的思想框架，所以我这里说的组件库划分关键指基础组件库的划分。我们先来看看antd的划分，它划分为：通用组件，规划组件，导航组件，数据录入和数据展现组件，反应型组件和其余。elementUI的组件划分为：基础组件，表单组件，数据出现组件，通知类组件，导航类组件和其余，这些分类都是十分正当的划分，所以我们在设计组件库时也可以参考或许间接经常使用，详细总结如下：

至于组件成功的设计思绪，其实笔者之前也写过很多文章来做铺垫，第一要义就是需求，一切要从需求登程。不只仅是react的组件设计，vue或许angular等都是相似的方法和思绪，这里便捷给大家举一个组件开发的例子——弹窗组件（Modal）的开发思绪：

4.从0搭建一个组件库

这一步是文章的重点，我们将会了解到如何经常使用umi/father来搭建团队的组件库。至于umi这个前端集成处置方案，笔者从它的架构中遭到了很多启示，并且基于umi+dva+react的前端开发流程运行十分宽泛，感兴味的好友可以钻研学习一下。

4.1father引见

官方引见就一句话：基于rollup和docz的库打包工具。它的特点关键有：

所以作为一个开箱即用的组件库打包工具，曾经为我们省去了很多两边步骤，比如说组件的测试，不同环境下的模块打包，而且还允许ts和文档性能，我们只须要把握babel和rollup的常识，就能用它轻松性能出一个弱小的组件库脚手架。假设对docz不太了解的可以在docz官方学习经常使用十分便捷,只需你对markdown和react相熟，分分钟入门。

4.2经常使用father搭建组件库

其实father的经常使用十分便捷，首先我们先装置一下father：

npminstallfather-D

或许经常使用yarn装置：

yarnaddfather

接上去我们可以在package.json里性能如下脚原本经常使用：

#打包库$fatherbuild#开发环境下启动文档服务$fatherdocdev#打包编译文档$fatherdocbuild#将文档部署到github$fatherdocdeploy#组件库测试及测试笼罩率$fathertest$fathertest--coverage

这里拿笔者之前曾经颁布到npm的组件库xui——基于react的轻量级UI组件库来举例。首先我们看看xui的package.json中的script脚本如何性能的：

"scripts":{"dev":"npx--max_old_space_size=8096fatherdocdev--host0.0.0.0","build":"fatherbuild","build:doc":"fatherdocbuild","deploy":"fatherdocdeploy"}

当我们口头npmrundev或许yarndev时，father智能帮我们启动了doc主机，我们接上去就能看到我们组件的测试文档了：

这些内容都是我们提早写好的mdx文档，语法相似于markdown，只不过参与了对react组件的编译允许，其实经常使用起来很便捷，我们只须要把react组件包裹在Playground容器里就好了，详细经常使用可以参考以下形式：

---name:Buttonroute:/Buttonorder:3sidebar:true---import{Playground}from'docz'importButtonfrom'./index'#Button####基本用法<Playground><Button>按钮</Button><br/><Button>按钮</Button><br/><Button>按钮</Button><br/><Button>按钮</Button><br/><Button>按钮</Button><br/><Button>按钮的命运</Button><br/></Playground>

头部的消息我须要引见一下：

我们依据案例可以知道mdx外面可以经常使用es6的导入形式来引入组件或许变量，其实还有很多性能，这里就不逐一举例了，感兴味的可以到docz官方学习。以下是官方的截图：

图片

接上去引见我们最关键的局部，.fatherrc.js文件的性能。初始化father名目时会智能生成一个自动性能，然而大少数状况下我们都须要自定义性能，官方的性能参数也很多，可以找到适宜自己团队的性能，这里我关键引见xui组件库的性能细节。先看看性能代码：

//.fatherrc.jsconstoptions={entry:'src/index.js',doc:{title:'xu_ui',themeConfig:{mode:'light'},base:'/xu_ui'},extraBabelPlugins:[['babel-plugin-import',{libraryName:'antd',libraryDirectory:'es',style:true,}]],//cssModules:true,extractCSS:true,lessInBabelMode:true,runtimeHelpers:true,esm:'babel',cjs:'babel',autoprefixer:{browsers:['ie>9','Safari>=6'],}};exportdefaultoptions;

经过以上的性能，我们就能欢快的开发组件啦。

4.3编写组件说明文档

组件说明文档是让其他人了解组件库的关键环节，包括组件库的适用范畴（pc端，移动端，轻量级还是重量级），兼容阅读器的版本，设计准则和背景，以及社区生态，经常使用方法等。所以组件库说明文档的编写也是十分关键的，大家详细可以参考antd或许element的说明文档，可以说是写的十分专业了。如下是antd的例子：

大家可以参考以上笔者整顿的外围局部去写组件说明文档。

5.组件库的package.json文件性能说明

假设你在为团队开发私有组件库，那么齐全不须要在意接上去笔者写的内容，然而假设你要开发一个开源的，大家都能经常使用的组件库，必定要留意以下几点的编写：

6.将组件库部署到github并颁布到npm上

首先我们须要在package.json中性能github的地址：

"repository":{"type":"git","url":"git+"}

大家可以复制以上代码改老自己的仓库地址。

其次我们须要登录进npm官方，假设你还没有账号可以间接放开一个，也很便捷，然后在终端经过命令行登录。

接上去我们口头以下几个命令就能将自己的组件库打包颁布到npm上了：

//打包编译组件库yarnbuild//编译组件库文档，该步骤可省略yarnbuild:doc//部署组件库文档到github,该步骤可省略yarndeploy//颁布到npm上npmpublish--accesspublic

以上的yarn命令详细成功可参考xui的package.json,也可以自己性能。经过上述步骤我们就成功将自己的组件库颁布到npm上了，是不是很便捷呢？

笔者曾经将成功过的组件颁布到npm上了,大家假设感兴味可以间接用npm装置后经常使用,形式如下:

npmi@alex_xu/xui//导入xuiimport{Button,Skeleton,Empty,Progress,Message,Tag,Switch,Drawer,Badge,Alert}from'@alex_xu/xui'

该组件库允许按需导入,我们只须要在名目里性能babel-plugin-import即可,详细性能如下:

//.babelrc"plugins":[["import",{"libraryName":"@alex_xu/xui","style":true}]]

npm库截图如下:

图片

组件系统与微前端架构初探

笔者本篇文章并不会将微前端架构的常识，然而既然触及到组件库，就必定要构成一个常识闭环，笔者特地画了如下脑图，供前端好友或许正预备走向微前端架构的团队一些参考：

web 从前端到全栈，如何一体化学习？

学习前端和全栈开发需要掌握的技能有很多，但是可以按照一定的顺序来学习。 以下是一些学习路线图，可以帮助您更好地了解前端和全栈开发的学习路线：1. 从前端到全栈，如何一体化学习？2. 最新Web前端学习路线图（2023年）3. web前端开发入门学习线路图（全套教程）4. 前端开发者学习路线图（2022年版）5. web全栈开发需学习哪些内容？

前端小知识点(从一名小白到前端大神需要掌握哪些知识点)

1.从一名小白到前端大神需要掌握哪些知识点 要想被称为前端大神要掌握的知识点还是有点多的，以我在源码时代培训过的经验来看，要想成为顶尖的前端大神，以下知识点你至少是应该要掌握的：“JavaScript基础、HTML入门基本内容，CSS+DIV的基础知识，选择器，盒子模型，网页布局，Photoshop,JavaScript高级编程，jQuery插件开发，模块化组件开，AJAX,HTML5,CSS3，响应式原理及布局，Bootstrap，前端依赖管理，CSS预处理语言（Less+Sass）,Grunt/Gulp自动化构建工具Express(),MongoDB,ElementUIl,MVC、MVVM架构模式，VUE2,Webpack模块加载器&打包工具，React,Angular4,React Native”是不是感觉很多？觉得多就对了，只有对上述内容做到系数掌握，你才有资格被称之为“前端大神”。 2.学习前端HTML5需要了解哪些知识点 Stylus/Less实现CSS预编译 Express实现服务器端搭建 Nginx实现服务器反向代理ngrok实现内网穿透 sha1、MD5实现加密隐私数据 Monggose实现mongoDB数据库操作 Echarts实现数据可视化 Mock、json-server实现模拟数据 Nodejs实现前后端完全分离 WebSocket实现实时通信 企业级UI设计图实现页面布局 BootStrap实现响应式页面 原生JavaScript实现小游戏开发 原生Ajax实现前后端通信 JSONP,CORS实现解决跨域 Animation实现动画 Canvas实现气泡， 钟表功能 jQuery实现备忘录项目 ArtTemplate实现模板页面复用 Viewport + Rem实现移动端适配 ViewPort实现1物理像素问题 原生JavaScript实现无缝滑屏 zepto实现移动端滑屏 Stylus/Less实现CSS预编译 Express实现服务器端搭建 Nginx实现服务器反向代理 ngrok实现内网穿透3.网站前端开发都需要掌握哪些知识 CSS和HTML、JavaScript这是前端学习的三个语言，其中HTML是自简单，设计到代码多的就是CSS、JavaScript，入，门简单，达到初级前端水平很容易。 但是精通各种框架需要一定学习实践1、CSS和HTML刚入门的朋友，应该把重点放在 CSS和HTML基础知识的学习上。 关于 CSS(3) 你需要了解以下一些知识点：web标准、HTML相关概念、HTML标签、路径相关概念、锚点及其他、表格标签、表单标签、综合案例，注册页面、CSS选择、CSS字体样、CSS外观属性、调式、CSS复合选择器、标签显示模式、CSS背景、CSS三大特性等等。 总的来讲，CSS和HTML的学习还是比较简单的。 2、JavaScriptJavaScript一直都是前端工程师进步的基石， JavaScript 的理解深度决定了前端开发者的职业发展。 关于JavaScript的学习内容包括了浏览器执行JS过程、JS变量、数据类型、运算符、流程控制语句（if else 、三元表达式、switch）、循环（for、while、do while）、数组、冒泡排序、函数、作用域、预解析、对象、内置对象、简单类型和复杂类型等。 只有在熟悉了JavaScript基础语法的基础上，我们才能继续深入学习前端技术。 前端需要掌握这些基本技能精通html，能够书写语意合理，结构清晰，易维护的html结构；精通css，能够还原视觉设计，并兼容业界承认的主浏览器；熟悉javascript，了解ECMAscript基础内容，掌握至少两种js框架随着web前端技术不断发展，web前端的岗位越来越多了，技术方向也有好多种，。 web前端有广阔的发展空间，app、小程序、移动端、pc端等都是需要前端技术的开发支持才能够完成，技术门槛相对较低、需求量较大，薪资待遇良好。 只要是互联网端的客户界面，就需要前端来制作完成，前端开发的编程量不大，但是需要部分编程，入门简单，但是要学的深入需要一个过程。 Web前端招聘岗位• 前端开发工程师、Web开发工程师、网页开发工程师、HTML开发工程师。 • H5开发工程师、移动应用开发工程师、App开发工程师、小程序开发工程师。 • JS开发工程师、开发工程师、开发工程师、前端架构师。 • 小游戏开发工程师、数据可视化开发工程师、WebGL开发工程师、WebVR开 发工程师、Web安全工程师。 在互联网行业，前端有WEB前端、HTML前端等，随着互联网技术发展，就业方向也有很多。 web前端的就业方向有web架构师、web前端工程师、HTML前端开发工程师、网页设计师等等。 HTML前端开发与Web前端开发不同的是，使用HTML5不仅仅可以开发前端，还有网页游戏，手机APP，使用浏览器进行3D渲染等一系列建立在HTML5标准与搭载其标准浏览器上的开发，而未来可能会有更多的功能分支并入HTML5标准。 web前端工程师这个方向是目前从事Web前端开发的主要就业方向Web架构师薪资普遍比较高，技术要求高，掌握多种技能，包括：后端技术、DBA、Platform等等，甚至包括网站优化SEO技术。 数据方向数据研发这个是在Web开发的基础上用数据附能，懂可视化的一定是有前端能力的，懂hadoop的一定java要熟悉，属于Web开发的拓展方向。 大前端方向比如阿里，在大量实践rn和weex；由于公司内部安卓/ios式微，一定程度上，前端把ios和安卓收编了，统称大前端。 图形学方向前端自然是与图形学有千丝万缕的联系，除了上面提到了可视化，还有相关3d引擎的开发工作。 做这一行要求也非常高了，图形学相关的算法，3d引擎的开发，这都需要图形学相关知识。 4.学HTML5,你需要掌握这几个知识点 Html5开发可谓是这几年来特别“受宠”的软件开发了，html5不仅入行门槛低、薪资高，发展前景更是可观，所以得到大家的追捧和青睐也是实至名归的，那么想要从事html5开发学习要掌握哪些必备的知识呢？ 那么想要学好html5开发，那么需要掌握的专业技术有： 第1阶段：前端页面重构：PC端网站布局、HTML5+CSS3基础项目、WebAPP页面布局； 第2阶段：JavaScript高级程序设计：原生JavaScript交互功能开发、面向对象开发与ES5/ES6、JavaScript工具库自主研发； 第3阶段：PC端全栈项目开发：jQuery经典特效交互开发、HTTP协议，Ajxa进阶与后端开发、前端工程化与模块化应用、PC端网站开发、PC端管理信息系统前端开发； 第4阶段：移动端webAPP开发：Touch端项目、微信场景项目、应用开发WebApp项目、应用Ionic开发WebApp项目、应用开发WebApp; 第5阶段：混合（Hybrid）开发：各类混合应用开发； 第6阶段：NodeJS全栈开发：WebApp后端系统开发； 第7阶段：大数据可视化：数据可视化入门、详解及项目实战。 如今移动互联网发展迅速，技术不断的更新迭代，所学知识也需与时俱进。 现在市场上的主流互联网网站，需要打造的是一流用户交互体验。 对于前端开发者的要求，不再是简单的页面展示，而是需要全栈式的前端开发工程师。 前端开发需要用到哪些知识 1. HTML5 + CSS3 + JavaScript Web开发基础中的基础，HTML是负责网页结构，CSS负责网页样式，JS则负责逻辑交互。 前两者更像是标记语言，没有什么逻辑，JS才是前端的重中之重。 HTML5 新增的技术大部分需要结合JS学习。 每个人学习进度可能不同，这个阶段主要是多仿站，熟悉基础，试试用CSS写响应式页面，了解JS深入性的知识，比如原型链、闭包、设计模式 等需要更多的积累，逐渐理解并实践掌握。 2. JQuery + BootStrap + Ajax + Json jQuery是JS的一个应用库，能够提升原生JS开发效率。 Bootstrap则是响应式框架，更简单的实现手机/平板/PC多个设备的页面支持。 Ajax技术用于异步交互，不刷新页面就能更新数据，比如 地图 应用等。 Json是一种数据格式，被广泛应用在各大编程语言中。 jQuery 和 bootstrap 会简化很多编写的代码量，用着不亦乐乎，但对于基础还不是很扎实的人建议还是少用。 Ajax 和 json 通常用于和后端交互，在实际业务中也经常用到。 3. Git/SVN 版本管理工具，主要用于团队开发时避免文件冲突，也可回档。 前端推荐学习Git。 4. Nodejs + Mysql /MongoDB（可选） 运行在服务器端的JavaScript。 Express是其拓展MVC框架。 其中nodejs最常用到的就是npm包管理器，不用到各个网站去下载资源包。 数据库 的学习可以选择MongoDB或者MySQL，前者与Nodejs的契合度更好，不过现在大多数网站都是 PHP +Mysql的组合，如果有学PHP的打算的话，可以先学习 Mysql 。 5. ECMAScript 6 JavaScript 的语言标准。 ES6中加入了很多新的概念，也弥补了之前版本中JS的很多缺陷，越来越多的项目开始运用ES6进行开发。 学之前最好把ES5先搞懂了，目前实际项目中考虑到兼容性，ES6是需要通过Babel将其编译为ES5来部署的。 6. Angular/React/Vue 前端三大框架，各自也有着各自的生态系统，根据需求自行选择学习。 目前企业需求量最大的仍然是Angular，但近期趋势来看react和vue则更受欢迎。 因为现在前端技术发展太过于突飞猛进，工具和框架的更新比翻书还快，建议学习还是看文档比较好。 学习过程中也会遇到很多用到各种构建工具的时候。 7. 其他常用工具 这个一样是根据需求自行选择学习。 比较常用的现在有 Web pack，可以将多个不同编程风格的文件打包，比如ES6/AMD/CMD之类的模块化都能识别并编译成 浏览器 能运行的文件。 Sass/Less,CSS预编译框架，可以用带有逻辑性的方式编写CSS代码。 Gulp/Grunt构建工具，可以自动化对代码进行压缩合并等工作。 8. 其他后端编程语言 目前市场对前端基本都要求会一门后端语言， PHP / JAVA / Nodejs / Python 等。 6.前端这么多知识点该怎么记忆 前端涉及到的知识确实是比较广的，先要理清一定的框架，然后有条理的进行学习才能事位功半，这里我有一份知识体系给你了解一下 如果你有毅力可以坚持下去就自己好好的自学，但如果觉得效率不是很好条件允许的话也可以考虑参加系统的培训，虽然要花钱但可以省不少的时间，自己权衡。