最近一直在看Vue3的源码，通过对Vue3的源码分解从头搭建出Vue3源码开发环境，需要梳理的东西还很多，现在将整个思路和源码弄了一个开源项目，大家可以一起参与进来。
开源项目地址：地址
搭建开发环境
1.初始化开发环境
- 使用yarn进行初始化
- 注意：因为Vue3使用monorepo来进行打包，monorepo不支持npm，只能使用yarn。
tyarn init -y
2.配置包管理（根目录下package.json）
- 配置private
"private": true
- 配置workspaces
"workspaces":[
"packages/*"
]
3.安装依赖TypeScript
- 根目录下安装typescript(因为使用了workspace，所以要加-W,表示要安装在根目录下)
安装：
tyarn add typescript -P -W
配置：通过node_modules/bin/tsc模块自动生成tsconfig.json
npx tsc --init
4.安装rollup打包的相关依赖
- 安装rollup相关依赖
rollup 打包工具
rollup-plugin-typescript2 rollup和ts的桥梁
@rollup/plugin-node-resolve 解析node第三方模块
@rollup/plugin-json 支持引入json
execa 开启子进程方便执行命令
tyarn add rollup rollup-plugin-typescript2 @rollup/plugin-node-resolve @rollup/plugin-json execa -D -W
- 配置rollup.config.js文件
根目录下创建rollup.config.js文件
- 引入相关依赖
- 获取文件路径
- 获取需要打包的包
- 获取每个需要打的包的配置
- 创建映射表
5.创建脚本打包命令- build.js
- 创建脚本命令目录
- 在根目录下创建scripts目录
- 在scripts目录下创建build.js
- 在根目录下创建脚本命令(打包命令)
"scripts":{
"build": "node scripts/build.js"
}
- 进行打包设置（使用monorepo打包）
- 获取打包文件（通过目录）
- 使用node中的fs读取文件
const fs = require('fs')- 使用fs.readdirSync获取packages的目录下的模块
const dirs = fs.readdirSync('packages')- fs.readdirSync会返回数组形式的packages目录下的模块（
[ 'reactivity', 'shared' ]）- 需要注意对是如果packages目录下有其他文件，例如.js文件，也会返回到数组中，需要对其额外处理（也就是说只对文件夹进行处理）使用filter进行过滤
// 不过滤非文件夹
// 使用monorepo进行打包
// 1. 通过node中fs获取目录
const fs = require('fs')
const dirs = fs.readdirSync('packages')
console.log(dirs);
// 过滤非文件夹
// 使用monorepo进行打包
// 1. 通过node中fs获取目录
const fs = require('fs')
const dirs = fs.readdirSync('packages').filter(p=>{
if(!fs.statSync(`packages/${p}`).isDirectory()){
return false
}
return true
})
- 进行打包
- 使用promise对象进行并行打包
- 使用node的execa开启子进程
// 进行打包
// 通过promise函数实现并行打包
// 开启子进程
async function build(target) {
console.log(target);
// 注意execa -c 执行rollup配置，环境变量 -env
await execa('rollup', ['-c', '--environment', `TARGET:${target}`])
}
// 并行打包
async function runParaller(dirs, itemfn) {
// 遍历拿到的所有的包
let result = []
for(let item of dirs) {
result.push(itemfn(item))
}
return Promise.all(result) // 存放打包的promise，等待打包完毕，调用成功
}
runParaller(dirs, build).then(()=>{ // promise异步处理
console.log('success');
})
6.创建脚本开发命令- dev.js
- 通过rollup -w实现监听
execa('rollup', ['-cw', '--environment', `TARGET:${target}`],{stdio:'inherit'})
搭建开发目录
1.新建packages目录
2.在packages目录下新建reactivity目录（响应式模块）
- 在reactivity目录下进行初始化
tyarn init -y - 初始化完之后修改name,方便调用
// 将package.json中name的值"reactivity"改成"@vue/reactivity"
"name": "@vue/reactivity"
- 打包格式处理(在package.json中配置)
"buildOptions": {
"name": "VueReactivity",
"formats": [
"esm-bundler",
"esm-browser",
"cjs",
"global"
]
},
- 创建src目录
- 在src目录下创建入口文件index.ts
2.在packages目录下新建shared目录（公用方法模块）
- 在shared目录下进行初始化
tyarn init -y - 初始化完之后修改name,方便调用
// 将package.json中name的值"shared"改成"@vue/shared"
"name": "@vue/shared"
- 打包格式处理(在package.json中配置)
"buildOptions": {
"formats": [
"esm-bundler",
"cjs"
]
},
- 创建src目录
- 在src目录下创建入口文件index.ts