搭建Vue3源码-Monorepo环境

godfly
261 阅读2分钟

Vue3中使用pnpm workspace来实现monorepo（pnpm是快速、节省磁盘空间的包管理器。主要采用符号链接的方式管理模块）

全局安装pnpm

image.png

image.png

创建packages文件夹，用来存放所有的包

搭建monorepo环境，创建pnpm-workspace.yaml文件

image.png

  • 表示pnpm下载的所有的包都应用在packages下面得模块中 

此时如果我们用pnpm安装包会报错

image.png

  • 我们不能直接安装，我们现在运行的命令在命名空间的根部，我们需要指定下载的包是否作为多个模块之间共享的模块

image.png

  • -w表示我就是把这个模块作为一个根目录下的共享模块

创建.npmrc文件

image.png

  • 这是一个npm配置文件，支持你可以继续使用幽灵依赖，比如vue依赖某个模块，你可以直接使用这个模块，但是可能有一天vue不再使用这个模块，这个模块就会失效，做这个配置就是可以支持你继续这样直接使用这个依赖。

下载ts相关依赖

image.png

在根模块的packages下创建reactivity文件，cd到这个模块中

初始化包

image.png

包起个名字，我们这里跟vue官网保持同步

image.png

在生成的package.json中配置选项buildOptions

image.png

  • 配置name后，包被引入后会在当前脚本中生成一个全局变量
  • formats，打包后的格式，global表示可以在全局引用的，也就是浏览器通过script标签引用的，cjs表示可以node中使用，esm-bundler表示在浏览器中使用

同理，我们在packages下创建shared文件夹，共享模块，配置同reactivity

我们需要进行一个打包配置，统一打包必须有统一入口。在reactivity文件夹下创建src文件夹，下面创建index。同理shared下也创建相同的文件

image.png

解决模块间相互引用的问题，关联reactivity和shared模块

  • 初始化ts 

image.png

image.png

  • 在配置文件中配置

image.png

  • baseUrl表示告诉它以当前路径为基准
  • path表示你的路径是@vue/*，那么就去packages下模块中的src里找

比如我们在shared文件下的src下的index.ts里导出一个方法

image.png

我们在reactivity里就可以这样引入

image.png

打包

根目录下创建一个文件夹script，下面创建dev.js文件

image.png

package.json配置开发模式打包命令

image.png

  • 我们可以传一些参数指定打包的模块以及打包的格式

dev.js脚本

首先通过minimist包来解析获取命令行参数

image.png

image.png

告诉它打的是哪个包以及打包的格式

image.png

找到对应包的package.json

image.png

判断打包格式

image.png

指定打包目录

image.png

用esbuild打包

image.png

image.png

  • 现在主流开发用esbuild打包，生产用rollup
  • esbuild打包速度非常快，利于开发。rollup更方便打成各种格式

测试

image.png

引入

image.png

avatar
文章
阅读
粉丝