vue3源码分析——rollup打包monorepo

Posted twinkle||cll

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3源码分析——rollup打包monorepo相关的知识,希望对你有一定的参考价值。

引言

<<往期回顾>>

  1. 手写vue3源码——创建项目
  2. 手写vue3源码——reactive, effect ,scheduler, stop
  3. 手写vue3源码——readonly, isReactive,isReadonly, shallowReadonly
  4. 手写vue3源码——ref, computed

本期咋们就先放一放源码,咋们如何打包monorepo应用,主要是源码看累了🤣🤣🤣,打包工具也是一门必须课,所有的源码请查看

效果

为了提供大家的学习兴趣,咋们先来看看效果,准备发车,请系好安全带🚗🚗🚗

cjs 结果预览

esm 结果预览

声明文件预览

正文

vue3使用的是rollup来打包的,咋们也用rollup来打包咋们的应用,有不了解rollup的请查看官网,monorepo是多个单体仓库合并得到的,那么咋们就先来打包单个仓库,然后再来想办法怎么一键打包全部

打包shared

在我项目中,shared仓库是相当与utils函数的集合,用于对外导出一些工具函数,那么咋们可以在本目录下的package.json中安装rollup。 正当我就想在shared目录下面安装rollup插件的时候,我大脑给了个慢着的问号?

monorepo 是不是可以在跟下面安装依赖,然后子包都可以共享,基于这一特征。我毫不犹豫在根目录下面敲下了下面的命令:

pnpm add rollup -w -D
复制代码

有了rollup,咋们是不是需要在打包的目录下面来搞个配置文件rollup.config.js,里面咋们写上入口,出口,打包的格式

// 由于咋们需要打包成cjs, ems的格式,对外导出一个函数吧

[
  
    input: './src/index.ts',
    output: 
      file: 'dist/index.esm.js',
      format: 'esm',
    ,
  ,
  
    input: './src/index.ts',
    output: 
      file: 'dist/index.cjs.js',
      format: 'cjs',
    ,
  
 ]
复制代码

然后在本目录下的package.json中加入打包的命令:

 "build": "rollup -c"
复制代码

nice, 到这了就完了,咋们试一下,结果:

分析错误可以发现,咋们是用了ts的语法,rollup无法转换ts的语法,需要使用插件了。😉😉😉

那么rollup转换ts的插件也是有好多种,这里咋们用一个最快的那种,esbuild, rollup-plugin-esbuild

pnpm add esbuild rollup-plugin-esbuild -w -D
复制代码

关于rollup-plugin-esbuild这个插件,官方的介绍是说:

esbuild is by far one of the fastest TS/ESNext to ES6 compilers and minifier, this plugin replaces rollup-plugin-typescript2, @rollup/plugin-typescript and rollup-plugin-terser for you. 意思是说,这个插件是目前来说转换ts/esnext到es6是最快的编译和压缩,这个插件可以代替 rollup-plugin-typescript2, @rollup/plugin-typescript and rollup-plugin-terser的集合

但是如果咋们需要打包非常低版本的代码,那就请查看rollup 实战第三节 打包生产打包低版本的代码.

言归正传,那么咋们把插件用上,在配置文件上加上插件

//... 省略其他
plugins: [
      esbuild(
        target: 'node14',
      ),
    ]
复制代码

再来一次🤩🤩🤩

通过结果,咋们可以看到已经打包成功了!🎉🎉🎉

但是咋们是有ts的,肯定还需要生成咋们代码的类型吧,那就使用 rollup-plugin-dts这个来生成

pnpm add rollup-plugin-dts -w -D
复制代码

rollup-plugin-dts详情请查看

// 在数组后面在加上一项,

    input: './src/index.ts',
    output: 
      file: 'dist/index.dts',
      format: 'esm',
    ,
    plugins: [
      dts(),
    ],
  ,
复制代码

然后就可以ok啦,咋们单个项目就完成了

打包多个

既然单个是这么写,那么其他的咋们是不是也可以写配置文件呢?对的,没错,可以在对应的单体项目下面写上rollup.config.js来对他们进行打包的配置

然后咋们在跟目录下面的package.json中加入一行命令:

"build": "pnpm -r --filter=./packages/** run build"
复制代码

咋们来拆分下命令

  1. pnpm -r 等同于 pnpm --recursive,意思是说在工作区的每个项目中运行命令,不包括根项目详情查看
  2. --filter=./packages/**意思是说,过滤其他文件和文件夹,只使用packages下面的所有文件夹
  3. run build 是 pnpm -r run build的后缀,执行package.json中的build指令,详情请查看

合起来的意思是说,依次执行packages里面所有文件夹的package.json的build命令

优化

通过上面的方式咋们就可以打包成功了,但是这里咋们还可以进行优化下,每一次打包dist结果都需要手动删除,咋们可以使用 rimraf 这个库来帮我们自动删除

pnpm add rimraf -d -W
复制代码

然后在每一个子包中修改build的命令

"build": "rimraf dist && rollup -c"
复制代码

对比vue3打包

这里可能有的人会说,vue3仓库都不是这么玩的,的确,vue3仓库的打包流程如下:

有兴趣的可以取看源码哈,这里给出流程图,想要使用这种方式的就自己实现哈!🎃🎃🎃

以上是关于vue3源码分析——rollup打包monorepo的主要内容,如果未能解决你的问题,请参考以下文章

vue3源码分析——rollup打包monorepo

vue3源码分析——实现组件的挂载流程

vue3源码分析——实现组件的挂载流程

vue3源码分析——实现组件的挂载流程

vue3源码分析——实现slots

vue3源码分析——实现slots