组件库开发小记（零）
平常我们使用各种组件库，如Element-UI等，有没有想过这些组件库是如何构建的呢？不如自己动手做一个属于自己的吧！这个系列以两个月前开发的组件库DEMO为例，进行总结与整理。
前言
在这篇文章中，笔者会介绍一个简单组件库该如何构建，构建过程应该包括着如下步骤：
- 组件编写
- 组件注册
- 单元测试
- 组件库打包
- 组件库发布
- 组件库文档
而该简易组件库以Vue2为基准来构建，采用Vue-test-utils + Jest来进行组建测试，借助webpack来进行组件打包，使用Vuepress来构建组件库的文档，可以算是针对vue的打包方案。而组件库比较关键的环节在于打包（按需加载）和测试，就这方面而言，在这篇文章中提到的方法也适用于其他各种框架下的组件，如React。
即便一个简单组件库的搭建，也会花很久，这个过程参考了诸多文章和一些源码，同时碰到了非常多的问题，这些问题我会依次在一系列的文章中讲述。而不久的将来，我还会使用monorepo去重构项目结构，并为其增加更多功能。
目录结构
在任何项目开始前，我们需要了解该项目的目录结构，以对其有整体的考量，也就是模块功能的划分等。
开始前，请阅读下面的文件目录，了解并思考各部分的功能。
.
├── README.md
├── config // webpack在不同环境下的配置
│ ├── dev.config.js // 开发环境下的配置
│ ├── lib.config.js // 库打包环境下的配置
│ └── prod.conf.js // 页面打包环境下的配置
├── example(src) // 测试vue组件，也即vue的src目录
│ ├── App.vue
│ ├── assets
│ ├── index.html
│ └── main.js
├── jest.config.js // 单元测试配置
├── lib // **库打包的目标文件夹
│ ├── index.js
│ ├── loading.js
│ ├── modal.js
│ ├── musicbox.js
│ ├── theme
│ └── toast.js
├── package.json
├── packages // **核心文件，包括各类组件源码
│ ├── index.js // 全局注册的入口文件
│ ├── loading
│ ├── modal
│ ├── musicbox
│ ├── theme // 样式文件，包含组件样式和公共样式
│ └── toast
├── pnpm-lock.yaml
├── scripts // 定制一些git脚本
│ └── sync.sh
├── tests
│ └── unit // **单元测试文件
└── webpack.config.js
分支结构
- master 主代码
- feature-vue/cli 第一阶段开发分支
- feature-webpack 第二阶段开发分支
- docs 组件库文档开发分支（版本问题必须另开分支）
- gh-pages 组件库文档部署分支
本组件库的文件结构部分借鉴Element-UI，第一阶段是直接在vue/cli上进行组件搭建，但是由于vue内置对webpack进行了多种配置，因此在第二阶段自我搭建vue的开发环境，自定义webpack配置，发现按需加载的打包后包的体积大幅度缩小，同时这也带来一些问题，比如在自我搭建的环境下，vue test utils + jest的失效与不能使用vue-cli-service lib全局库打包命令。各有利弊，后面细说。
文章系列
笔者在最近几天会将完成一个组件库的步骤按顺序整理下来。基本上都是干货，一般官方文档有的内容，我就不再废话了。系列内容按顺序整理在下方：
