如何开发前端组件库

在讲如何做之前先说两个不大、却有点重要的问题～。 ps（文章最后有项目案例）

1. 为什么要自己开发一个前端组件库？

或者说，自己开发一个前端组件库有什么好处？

我认为前端组件库是我们前端练习写一个library的最简单最有效的方式 （当然在面试中也算一个不错的亮点）。

因为开发组件库的过程不仅练习了框架（vue/react）的使用，还集合了包括单元测试、UI输出、类型检查、打包构建等从头到尾一整套的知识。其中每一块里面又包含很多内容，如果专门拿出来一个学习，不仅不系统，而且容易忘记，而前端组件库就很好的把这些知识集合了起来，不需要花费很长时间却能学习很多知识。可谓事半功倍。

2. 自己开发前端组件库要达到什么效果才算合格?

难道要像Antd那样？

我们应该都用过 element 或者 antd design等一些前端组件库，可能有些同学看过他们的源码，是不是感觉复杂？难道自己也要开发成这种吗？如果是这样的话，估计90%同学都要放弃。当然没必要开发成这样。或者做出来的项目只有这些：

我们都知道任何复杂的项目都是一点点堆积起来、沉淀下来的，所以开发组件库最重要的就是把基础的功能做出来，让项目做到麻雀虽小五脏俱全。哪怕只写了一个Button组件，但是最终的结果是可以让别人下载安装并且成功导入到项目中使用，那这个项目就可以说是完整且有效的。

总结下来就是：

1. 开发前端组件库能让自己有更完整的技术栈，而不只是 “vue工程师”。
2. 项目的最终目标是小而全，而不是多而烦，做到事半功倍。

现在我们应该有信心了，不必再觉得开发一个前端组件库这么遥不可及了，我又不是为了开发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的配置可以实现。

总结：方向包括上面这些，还有一些细节会在项目中遇到再解决，这样印象会更深刻，

下面附上一个例子，一个很迷你的组件库，但是自己写出来还是意义重大，可以照猫画虎，只要能完整写出来，并理解其中的思路，对自己来说就会进步很大。项目案例，如果自己也想做，建议拷贝到本地并且也亲自安装到一个项目中，边看边学边练，有问题记下来，可以在评论一起讨论。