搭建Vue3源码的开发环境

最近一直在看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文件

1. 引入相关依赖
2. 获取文件路径

• 获取需要打包的包
• 获取每个需要打的包的配置

3. 创建映射表

5.创建脚本打包命令- build.js

• 创建脚本命令目录

• 在根目录下创建scripts目录
• 在scripts目录下创建build.js

• 在根目录下创建脚本命令(打包命令)

"scripts":{
  "build": "node scripts/build.js"
}

• 进行打包设置（使用monorepo打包）

1. 获取打包文件（通过目录）

• 使用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
})

2. 进行打包

• 使用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