在讲如何做之前先说两个不大、却有点重要的问题~。 ps(文章最后有项目案例)
1. 为什么要自己开发一个前端组件库?
或者说,自己开发一个前端组件库有什么好处?
我认为前端组件库是我们前端练习写一个library
的最简单最有效的方式 (当然在面试中也算一个不错的亮点)。
因为开发组件库的过程不仅练习了框架(vue/react)的使用,还集合了包括单元测试、UI输出、类型检查、打包构建等从头到尾一整套的知识。其中每一块里面又包含很多内容,如果专门拿出来一个学习,不仅不系统,而且容易忘记,而前端组件库就很好的把这些知识集合了起来,不需要花费很长时间却能学习很多知识。可谓事半功倍。
2. 自己开发前端组件库要达到什么效果才算合格?
难道要像Antd那样?
我们应该都用过 element
或者 antd design
等一些前端组件库,可能有些同学看过他们的源码,是不是感觉复杂?难道自己也要开发成这种吗?如果是这样的话,估计90%同学都要放弃。当然没必要开发成这样。或者做出来的项目只有这些:
我们都知道任何复杂的项目都是一点点堆积起来、沉淀下来的,所以开发组件库最重要的就是把基础的功能做出来,让项目做到麻雀虽小五脏俱全。哪怕只写了一个Button
组件,但是最终的结果是可以让别人下载安装并且成功导入到项目中使用,那这个项目就可以说是完整且有效的。
总结下来就是:
- 开发前端组件库能让自己有更完整的技术栈,而不只是 “vue工程师”。
- 项目的最终目标是小而全,而不是多而烦,做到事半功倍。
现在我们应该有信心了,不必再觉得开发一个前端组件库这么遥不可及了,我又不是为了开发Element
对吧~
如何开发
下面简单讲一个开发的步骤和要点,最最重要的是理清脉络和亲自实践。
- 开始编码之前的准备
- 确定框架类型:
React or Vue?
我选的React
,所以下面就用React
当作例子 - 项目创建方式:
- 这个倒是因人而异,如果并不想把
webpack
的学习加入到此次计划中,那么就使用脚手架工具就好了。假如自己从0搭建,如果对webpack
不是很熟悉,那么可能还没开始就放弃了,所以建议使用脚手架,如果以后想学习工程化,可以专门拿项目专门来练习webpack
。所以建议脚手架创建项目。
- 类型检查:
- 建议项目中使用
typescript
,ts会让代码的可维护性变的很高,而且可以减少bug
。
- ESlint和 prettier:
- 这两个简直绝配,
eslint
只负责语法检查,而prettier负责代码风格检查,各司其职。 - 使用教程可以参照这里。
- 开发中用到的知识以及解决了哪些问题
- 样式选型:
sass
,可以定义css变量,具有mixin和函数的功能 - 单元测试:
react-testing-library
,react官方推荐的测试框架,组件库非常适合用单元测试,因为每个组件划分明确,跟其他组件互不干扰,而且解决了
每添加一个属性都要手动测试其功能。 - 本地调试:
storybook
,痛点:
因为每一个组件都有很多属性,如果我们自己写组件,把每个样式都调试出来会很繁琐,而storybook就解决了本地开发过程中的调试问题。可以在页面中随便选属性。 - 打包构建:
- 打包
css
,利用node-sass
命令行 - 打包
js
,要按照两种规范都打包出来:Commonjs
和Esmodule
规范,通过tsconfig的配置可以实现。
总结:方向包括上面这些,还有一些细节会在项目中遇到再解决,这样印象会更深刻,
下面附上一个例子,一个很迷你的组件库,但是自己写出来还是意义重大,可以照猫画虎,只要能完整写出来,并理解其中的思路,对自己来说就会进步很大。项目案例,如果自己也想做,建议拷贝到本地并且也亲自安装到一个项目中,边看边学边练,有问题记下来,可以在评论一起讨论。