【学习笔记】Vue3源码解析：第一部分-实现vue3环境搭建

news/2024/7/10 3:09:55 标签: 学习, 笔记, vue

课程地址：【已完结】全网最详细Vue3源码解析！（一行行带你手写Vue3源码）

第一部分：实现vue3环境搭建（对应课程的第1-3节）

VUE2与VUE3的对比：

也即vue2的痛点：

  1. 对TypeScript支持不友好，所有属性都放在this对象上，难以推导数据类型
  2. 大量API挂载在vue对象原型上，难以实现TreeShaking
  3. 架构层面对跨平台DOM渲染开发支持不友好（这一点我不太理解）
  4. 推出CompositionAPI（受reactHook启发）
  5. 对虚拟DOM进行了重写，对模板的编译进行了优化

Monorepo介绍

Monorepo 是一种项目代码管理方式，指单个仓库中管理多个项目，是一种将多个peckage放在一个repo中的代码管理模式。其有助于简化代码共享、版本控制、构建和部署等方面的复杂性，并提供更好的可重用性和协作性。更多可参阅：带你了解更全面的 Monorepo - 优劣、踩坑、选型
vue3中使用 yarn workspace+lerna 来管理项目。

Monorepo环境搭建

1、项目初始化：由于Monorepo是不支持npm的，所以使用yarn来初始化一个项目：

yarn init -y

2、 Monorope分包：打开项目根目录中的package.json文件，在其中加入如下配置：private与workspaces

//package.json
{
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "name": "vue3",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "typescript": "^5.3.3"
  },
  "devDependencies": {
    "@rollup/plugin-json": "^6.1.0",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "execa": "^8.0.1",
    "rollup": "^4.9.6",
    "rollup-plugin-typescript2": "^0.36.0"
  },
  "type":"module"
}
  • private：表示私有
  • workspaces：表示分包，所有的包都会放在packages目录下

3、新建两个包文件夹
根目录下新建packages文件夹，在packages目录下新建reactivity与shared文件夹，并分别进入reactivity与shared文件夹中，分别执行 yarn init -y 生成各自的package.json文件，并在这两个文件夹下各自创建src文件，在src中创建入口文件index.ts；
在两个index.ts文件中随意编写一点不同的代码（如不写代码，稍后打包时会报错），如：

let a = 1
export {
  a
}

在这里插入图片描述
4、安装ts：注意：如果是所有包都要用的，比如ts，那就安装在最外层的package.json中，即项目根目录中的package.json中：

yarn add typescript -D -W

-D表示开发环境；由于进行了分包，所以在根目录中安装需要加上 -W 配置项
在这里插入图片描述
5、通过ts的tsc命令自动生成配置项tsconfig.json：

npx tsc --init

在这里插入图片描述
6、安装rollup打包的相关依赖，在命令行中执行如下命令：

yarn add rollup rollup-plugin-typescript2 @rollup/plugin-node-resolve @rollup/plugin-json execa -D -W

7、创建一个脚本执行命令scripts，在根目录中的package.json中：
在这里插入图片描述
8、配置打包选项，分别在reactivity和shared文件夹下的package.json文件中配置各个包对应的打包配置：
在这里插入图片描述
将name分别修改为"@vue/reactivity" 与 “@vue/shared”；
reactivity文件夹下的package.json增加如下配置：
shared文件夹下的package.json增加的配置中去掉global：

"buildOptions":{
    "name":"VueReactivity",    // shared文件夹下为"VueShared"
    "formats":[
      "esm-bundler",
      "cjs",
      "global"     // shared文件夹下的package.json增的配置中去掉此行
    ]
  }

9、编写打包配置文件build.js：
在这里插入图片描述

// build.js
/ 1、获取打包目录
// const fs = require("fs")
// const execa = require("execa")

import fs from "fs"
import {execa} from "execa"

// 读取packages下所有文件名字，并过滤掉非文件夹，只保留packages下的文件夹
const dirs = fs.readdirSync("packages").filter(p=>{
  if(!fs.statSync(`packages/${p}`).isDirectory()){
    return false
  }
  return true
})

console.log('888888',dirs)    //[ 'reactivity', 'shared' ]

// 2、进行打包 并行打包
async function build(target){
  console.log(target,666)
  // await execa('rollup',['-c --bundleConfigAsCjs',"--environment",`TARGET:${target}`],{stdio:'inherit'})
  await execa('rollup',['-c',"--environment",`TARGET:${target}`],{stdio:'inherit'})
}

function runParaller(dirs,itemfn){
  let result = []
  for(let item of dirs){
    result.push(itemfn(item))
  }
  return Promise.all(result)
}

runParaller(dirs,build).then(()=>{
  console.log("成功")
})

10、根目录下新建rollup配置文件，rollup.config.js，在其中编写配置代码：

// 编写打包配置
// import ts from 'rollup-plugin-typescript2'   //解析ts
// import json from '@rollup/plugin-json'
// import resolvePlugin from '@rollup/plugin-node-resolve'  // 解析第三方插件
// import path from 'path'  // 处理路径

const ts = require('rollup-plugin-typescript2')   //解析ts
const json = require('@rollup/plugin-json')
const resolvePlugin = require('@rollup/plugin-node-resolve')  // 解析第三方插件
const path = require('path')  // 处理路径

// （2）获取文件路径
let packagesDir = path.resolve(__dirname,'packages')
// console.log(packagesDir, 888)    // D:\suyou\study\vue3-source-code\vue3\packages

// 2.1  获取需要打包的包
let packageDir = path.resolve(packagesDir, process.env.TARGET)
// console.log(packageDir, 888)   // D:\suyou\study\vue3-source-code\vue3\packages\reactivity

// 2.1  获取到每个包的项目配置
const resolve = p => path.resolve(packageDir, p)
const pkg = require(resolve('package.json'))    // 获取json
const packageOptions = pkg.buildOptions || {}
const name = path.basename(packageDir)
console.log(packageOptions, 888)   //{ name: 'VueReactivity', formats: [ 'esm-bundler', 'cjs', 'global' ] }
console.log(name, 888)   // reactivity

// 3  创建一个表
const outputOptions = {
  "esm-bundler":{
    file: resolve(`dist/${name}.esm-bundler.js`),
    format:'es'
  },
  "cjs": {
    file: resolve(`dist/${name}.cjs.js`),
    format: 'cjs'
  },
  "global": {
    file: resolve(`dist/${name}.global.js`),
    format: 'iife'
  },
}

const options = pkg.buildOptions

function createConfig(format,output){
  // 进行打包
  output.name = options.name
  output.sourcemap = true
  // 生成rollup配置
  return {
    input:resolve('src/index.ts'),
    output,
    plugins:[
      json(),
      ts({  //解析ts
        tsconfig:path.resolve(__dirname,'tsconfig.json')
      }),
      resolvePlugin()  //解析第三方插件
    ]
  }
}

// export default options.formats.map(format => createConfig(format, outputOptions[format]))

module.exports = options.formats.map(format => createConfig(format, outputOptions[format]))

11、将 tsconfig.json中的 target 和module 字段都改为 ESNext
在这里插入图片描述
12、运行打包：npm run build，成功：
此时会发现reactivity文件夹和shared文件夹下会出现打包生成的dist文件夹：
在这里插入图片描述
13、根目录下package.json文件中新增 dev 运行脚本命令：
在这里插入图片描述
14、scripts目录下新建dev.js并在其中编写：
'-c’处增加w，表示实时监控文件更新并自动编译

// dev.js
import {execa} from "execa"

// 进行打包
async function build(target){
  // console.log(target,666)   // reactivity  
  // {stdio:'inherit'} 配置项表示在子进程中输出内容可以在主包中输出
  await execa('rollup',['-cw','--environment',`TARGET:${target}`],{stdio:'inherit'})
}

build('reactivity')

运行npm run dev，此时可以修改代码后实时打包：
在这里插入图片描述
15、解决包之间的引入问题：
在reactivity的入口文件中引入shared:

import {b} from '@vue/shared'

在这里插入图片描述
此时 @vue/shared 处会出现波浪线，提示找不到这个模块。这时就需要到tsconfig.json中增加如下配置：
在这里插入图片描述

// 解决引入的问题 ts
    "moduleResolution": "node",  //node
    "baseUrl": ".",  // 根路径
    "paths":{
      "@vue/*":["packages/*/src"]
    }

总结

1、yarn init -y初始工程
2、package.json文件中，增加：
“private”:“true”;
“workspaces”:[“packages/*”]
3、项目目录下新建文件夹packages，在其中新建两个文件夹reactivity、shared,分别进入这两个文件夹，执行yarn init -y，生成各自的package.json,分别在其package.json文件中增加配置：
修改name:“@vue/reactivity” name:“@vue/shared”
增加buildOptions:{
“name”:“VueReactivity” “name”:“VueShared”
format:[
“esm-bundler”,
“cjs”,
“global”
]
}
4、分别在文件夹reactivity、shared中新建src文件夹，并在其中新建index.ts入口文件
5、使用ts就要安装ts，因为ts是全局使用的，所以需要安装在根目录下，即在根目录下执行 yarn add typescript -D -W (-D表示开发环境，由于进行了分包，所以在根目录中安装需要加上 -W 配置项)
6、ts安装完成后，node_modules目录下会新增typescript-bin-tsc，此时使用tsc生成ts配置文件：执行：npx tsc --init,自动生成 tsconfig.json 文件
7、安装rollup打包的相关依赖：
yarn add rollup rollup-plugin-typescript2 @rollup/plugin-node-resolve @rollup/plugin-json execa -D -W
8、配置脚本执行命令：根目录 package.json 文件中，新增：
“scripts”:{
“build”:“node scripts/build.js”
}
9、根目录下新建scripts目录，并在其中创建build.js文件，在其中编写打包逻辑代码（详见代码）
10、根目录下新建rollup配置文件，rollup.config.js，在其中编写配置代码（详见代码）
11、将 tsconfig.json中的 target 和 module 字段都改为 ESNext（不然运行打包会报错）
12、配置开发环境打包：根目录package.json中添加dev运行命令，并在scripts目录下新建对应的dev.js文件，在其中编写打包逻辑代码（详见代码）
13、解决包之间引入问题，在tsconfig.json中增加相应配置（详见代码）
14、运行打包 npm run build 或 npm run dev，实现都可以成功打包

实践问题

编写build.js这一步跟着课程里的代码自己实践中，我遇到了问题，记录如下：

在这里插入图片描述

猜测报错信息大致是说execa不支持用require方式引入，改成import试试吧，又出现如下报错：

在这里插入图片描述

按照提示在package.json中增加"type": “module”，还是报错：

在这里插入图片描述

报错信息说execa没提供default暴露的接口，那就用 import {} 方式试试：

在这里插入图片描述

这是注意报错，不是execa引入有问题了，而是fs有问题了，因为我们配置了"type": “module”，所以把fs引入方式也改成import方式：

在这里插入图片描述

此时的报错信息为找不到rollup配置文件了。
在rollup.config.js配置文件中编写如下代码运行后报错如下：

在这里插入图片描述

按照错误提示把rollup.config.js文件后缀分别改为.cjs和.mjs，以及在execa()执行配置项中增加–bundleConfigAsCjs ，都无效；

在这里插入图片描述

在execa()执行配置项中增加–bundleConfigAsCjs 时报这个错：

在这里插入图片描述

最终解决方案如下：将依赖的引入方式都改为require形式，同时将配置文件后缀改为.cjs：

在这里插入图片描述

解决思路来源于rollup官网中的一句话。看来还是要多看官方文档。

在这里插入图片描述

rollup.config.js文件中的配置编写完成后，运行报错如下：

在这里插入图片描述

将export default 方式改为 module.exports 方式后此报错解决，出现如下报错：

在这里插入图片描述

参考 第11 步解决：

在这里插入图片描述


http://www.niftyadmin.cn/n/5358525.html

相关文章

PTA——7-31 三角形判断

PTA——7-31 三角形判断

7-31 三角形判断 (15分) 给定平面上任意三个点的坐标(x​1​​,y​1​​)、(x​2​​,y​2​​)、(x​3​​,y​3​​)，检验它们能否构成三角形。 输入格式: 输入在一行中顺序给出六个[−100,100]范围内的数字，即三个点的坐标x​1​​、y​1​​、x​2​…
阅读更多...
苹果电脑Mac清理内存怎么清理卸载残留

苹果电脑Mac清理内存怎么清理卸载残留

苹果电脑中的应用程序大部分是可以通过将其拖拽至废纸篓并倾倒来卸载的。但是部分程序在卸载后仍有残留文件，比如support文件和pref设置等文件的。小编今天介绍下苹果电脑清理内存怎么清理卸载残留以及好用的清理技巧分享。 一、苹果电脑清理内存怎么清理卸载残留 …
阅读更多...
netlink学习

netlink学习

netlink是什么 netlink是Linux内核中的一种进程间通信（IPC）机制。它允许内核空间与用户空间之间，以及用户空间进程之间进行双向通信。 内核里的很多子系统使用netlink通信，包括网络管理（Routing，Netfilt…
阅读更多...
一文教你如何本地搭建Qchan图床网站实现公网远程访问

一文教你如何本地搭建Qchan图床网站实现公网远程访问

文章目录 前言1. Qchan网站搭建1.1 Qchan下载和安装1.2 Qchan网页测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar云端设置2.2 Cpolar本地设置 3. 公网访问测试总结 前言 图床作为云存储的一项重要应用场景，在大量开发人员的努力下，已经开发出大…
阅读更多...
引领云计算未来的技术-云原生详解

引领云计算未来的技术-云原生详解

目录 云原生的定义 云原生的核心特征 云原生的优势 云原生最佳实践 小结 随着云计算技术的不断发展与普及，越来越多的企业和开发者开始关注云原生（Cloud Native）这一概念。云原生不仅是构建和运行应用程序的一种全新方式，更是…
阅读更多...
MySQL数据库基础第一篇（SQL通用语法与分类）

MySQL数据库基础第一篇（SQL通用语法与分类）

文章目录 一、SQL通用语法二、SQL分类三、DDL语句四、DML语句1.案例代码2.读出结果 五、DQL语句1.DQL-基本查询2.DQL-条件查询3.DQL-聚合函数4.DQL-分组查询5.DQL-排序查询6.DQL-分页查询7.DQL语句-执行顺序1.案例代码2.读出结果 六、DCL语句1.DCL-管理用户2.DCL-权限控制1.案例…
阅读更多...
【C++干货铺】哈希结构在C++中的应用

【C++干货铺】哈希结构在C++中的应用

目录 unordered系列关联式容器 unordered_map unordered_map的接口说明 1.unordered_map的构造 2. unordered_map的容量 3. unordered_map的迭代器 4. unordered_map的元素访问 5. unordered_map的查询 6. unordered_map的修改操作 7. unordered_map的桶操作 底层结构 …
阅读更多...
python如何实现异步并发

python如何实现异步并发

下面是一个示例代码，展示了如何设计一个异步线程池，并实现线程池满了就等待，空了就继续扔的功能： import concurrent.futures import time # 创建一个线程池 thread_pool concurrent.futures.ThreadPoolExecutor(max_workers8) …
阅读更多...
最新文章

Copyright @ 2022~2023