vue3源码分析rollup打包monorepo

　　引言
　　往期回顾手写vue3源码创建项目手写vue3源码reactive，effect，scheduler，stop手写vue3源码readonly，isReactive，isReadonly，shallowReadonly手写vue3源码ref，computed
　　本期咋们就先放一放源码，咋们如何打包monorepo应用，主要是源码看累了，打包工具也是一门必须课，所有的源码请查看效果
　　为了提供大家的学习兴趣，咋们先来看看效果，准备发车，请系好安全带
　　cjs结果预览
　　esm结果预览
　　声明文件预览
　　正文
　　vue3使用的是rollup来打包的，咋们也用rollup来打包咋们的应用，有不了解rollup的请查看官网，monorepo是多个单体仓库合并得到的，那么咋们就先来打包单个仓库，然后再来想办法怎么一键打包全部打包shared
　　在我项目中，shared仓库是相当与utils函数的集合，用于对外导出一些工具函数，那么咋们可以在本目录下的package。json中安装rollup。正当我就想在shared目录下面安装rollup插件的时候，我大脑给了个慢着的问号？
　　monorepo是不是可以在跟下面安装依赖，然后子包都可以共享，基于这一特征。我毫不犹豫在根目录下面敲下了下面的命令：pnpmaddrollupwD复制代码
　　有了rollup，咋们是不是需要在打包的目录下面来搞个配置文件rollup。config。js，里面咋们写上入口，出口，打包的格式等由于咋们需要打包成cjs，ems的格式，对外导出一个函数吧〔｛input：。srcindex。ts，output：｛file：distindex。esm。js，format：esm，｝，｝，｛input：。srcindex。ts，output：｛file：distindex。cjs。js，format：cjs，｝，｝〕复制代码
　　然后在本目录下的package。json中加入打包的命令：build：rollupc复制代码
　　nice，到这了就完了，咋们试一下，结果：
　　分析错误可以发现，咋们是用了ts的语法，rollup无法转换ts的语法，需要使用插件了。
　　那么rollup转换ts的插件也是有好多种，这里咋们用一个最快的那种，esbuild，rolluppluginesbuildpnpmaddesbuildrolluppluginesbuildwD复制代码
　　关于rolluppluginesbuild这个插件，官方的介绍是说：
　　esbuildisbyfaroneofthefastestTSESNexttoES6compilersandminifier，thispluginreplacesrollupplugintypescript2，rollupplugintypescriptandrolluppluginterserforyou。意思是说，这个插件是目前来说转换tsesnext到es6是最快的编译和压缩，这个插件可以代替rollupplugintypescript2，rollupplugintypescriptandrolluppluginterser的集合
　　但是如果咋们需要打包非常低版本的代码，那就请查看rollup实战第三节打包生产打包低版本的代码。
　　言归正传，那么咋们把插件用上，在配置文件上加上插件。。。省略其他plugins：〔esbuild（｛target：node14，｝），〕复制代码
　　再来一次
　　通过结果，咋们可以看到已经打包成功了！
　　但是咋们是有ts的，肯定还需要生成咋们代码的类型吧，那就使用rollupplugindts这个来生成pnpmaddrollupplugindtswD复制代码
　　rollupplugindts详情请查看在数组后面在加上一项，｛input：。srcindex。ts，output：｛file：distindex。dts，format：esm，｝，plugins：〔dts（），〕，｝，复制代码
　　然后就可以ok啦，咋们单个项目就完成了打包多个
　　既然单个是这么写，那么其他的咋们是不是也可以写配置文件呢？对的，没错，可以在对应的单体项目下面写上rollup。config。js来对他们进行打包的配置
　　然后咋们在跟目录下面的package。json中加入一行命令：build：pnpmrfilter。packagesrunbuild复制代码
　　咋们来拆分下命令pnpmr等同于pnpmrecursive，意思是说在工作区的每个项目中运行命令，不包括根项目，详情查看filter。packages意思是说，过滤其他文件和文件夹，只使用packages下面的所有文件夹runbuild是pnpmrrunbuild的后缀，执行package。json中的build指令，详情请查看
　　合起来的意思是说，依次执行packages里面所有文件夹的package。json的build命令优化
　　通过上面的方式咋们就可以打包成功了，但是这里咋们还可以进行优化下，每一次打包dist结果都需要手动删除，咋们可以使用rimraf这个库来帮我们自动删除pnpmaddrimrafdW复制代码
　　然后在每一个子包中修改build的命令build：rimrafdistrollupc复制代码对比vue3打包
　　这里可能有的人会说，vue3仓库都不是这么玩的，的确，vue3仓库的打包流程如下：
　　有兴趣的可以取看源码哈，这里给出流程图，想要使用这种方式的就自己实现哈！