起始
要进行一次组件库的重构，使用vue3，支持ts
这也是我第一次从零开始搭建一个组件库，后续会有另外的小伙伴加进来，任重而道远
先上一张目前的进度图
使用vite
为什么使用vite
- 新技术
- 启动快，热更新快
- 没有用过
第三点，也许是最打动我的（^_^）。
用vite干什么
组件库的灵魂是文档 -- 出自百度大佬
不错，用vite来搭建文档服务。
在此之前，也去尝试过其他的文档库：
- 比如docsify，非常棒，只需要一个index.html，可以包含侧边栏、导航等等，功能足够，编写友好
- 比如vuepress，专为vue构建静态网站，写起来像数1，2，3一样容易
- 比如vitepress，是vuepress的一个小兄弟，支持vite ...
等等，解决方案有不少，但对于一个总想搞点花里胡哨的人来说，不能随心所欲的写页面，总感觉很怪异。
而且，我的目标是做公司最炫酷的文档首页！！！！！！
于是，兜兜转转，找到了vite-plugin-vuedoc
支持vue文件预览，vue和tsx都支持哦，与markdownit完美融合，最重要的，给了我一个写写layout的机会。
它是vite的一个插件，后续会看到^_^
用法：下载之后，放入vite插件选项，之后将md文件当成一个vue组件来写就可以了
具体用法，可以去查看相关文档。
使用rollup
文档有了，最重要的一步，就是打包组件库。
rollup打包的代码更加精简 -- 出自百度大佬
如果不信，可以去看一下webpack和rollup的打包文件。
贴一张我的rollup部分配置。
- vuePlugin:用来解析vue文件
- vueJsx：用来解析jsx文件，这个会作为esbuild的一个插件来使用
- nodeResolve：用来解析路径
- esbuild：速度极快的打包工具，但只能打包成es6语法，如果需要转译，去查看rollup-plugin-babel的相关文档
- postcss：方便到不行的css解析工具，可以提取css文件，用于按需加载 ... 具体的业务需求，看个人，查找具体的插件即可。
使用tsx
为什么使用ts：这一点，只有用了才知道 （vite自带ts支持，放心使用，vue3也对ts又了很强大的支持，不用白不用！！！）
至于是否需要使用jsx，看个人。
不过这里有一个疑问：
vue3建议模版写法，做了不少优化，使用jsx之后优化力度会不会携带，后面有时间再看。
使用jest
每一个组件作为一个单独可编译运行的独立模块，理应能够做一些测试
下面是关于jest的依赖包，版本请注意，这也是多次尝试后的结果。。。
都是泪。。。
支持vue/tsx组件测试
下面是jest.config.js
eslint代码检测 + prettier代码格式化
这里看个人，可以不用，但不能没有。
.eslintrc.js
上传
npm publish
最后的最后，我们可以写一些小工具来提高开发效率。
比如：
- 自动创建组件模版，包括ts，tsx，css等等文件
- 自动生成入口文件
- 自动创建文档路由 。。。
完毕！
记于2022-01-01
在写某个组件的过程中，遇到了在样式文件中引入node_modules模块的需求。
例如：@import 'modules/abc'
之前使用的是rollup-plugin-postcss，在scss文件中导入第三方模块的时候，需要在前面添加～标识符才能够打包成功，但vite使用的postcss-import默认不需要添加～标识符。
这之间便发起生了冲突。
我的意愿是不需要写～，毕竟当下的sass-loader也是支持node_modules查询的，所以我尝试了在rollup-plugin-postcss中添加postcss-import来解决该问题，但无效，去查看了插件的代码，发现并不能通过这种方式来解决。
所以更换为了rollup-plugin-scss（我是用的是scss），支持css压缩，默认也支持从node_modules中查询模块。
下图为具体配置：
如果有遇到相关问题的小伙伴可以去看一下具体文档。
记于2022-01-03
jest css引入问题解决，在css中引入其余样式文件的情况下，jest会报错，配置如下，配置前请先安装依赖。
记于2022-01-16
这段时间忙于业务，写组件的时间不是很多，不过在写的过程中对于测试倒是多了一些理解，在这里推荐一本书，vue.js应用测试，里面讲解了关于测试的概念、分类，以及在工作中如何应用，值得一看。
