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

课程地址:【已完结】全网最详细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.buildOptionsfunction createConfig(format,output){// 进行打包output.name = options.nameoutput.sourcemap = true// 生成rollup配置return {input:resolve('src/index.ts'),output,plugins:[json(),ts({  //解析tstsconfig: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.hqwc.cn/news/443247.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Algorithms 4】算法(第4版)学习笔记 02 - 1.4 算法分析

文章目录 前言参考目录学习笔记1:科学方法2:观察举例:三数之和3:近似4:增长数量级4.1:二分查找 demo4.2:二分查找代码实现4.3:二分查找比较次数的证明(比较次数最多为lgN…

知识推理的多重途径

目录 前言1 逻辑及推理简介2 演绎推理:Top-Down Logic2.1 肯定前件假言推理2.2 否定后件假言推理2.3 演绎推理的逻辑链条 3 归纳推理:Bottom-Up Logic3.1 从特例到一般3.2 逐步推导的过程 4 溯因推理:结果的可解释逻辑4.1 推断过程的回溯4.2 …

西瓜书读书笔记整理(十二) —— 第十二章 计算学习理论(下)

第十二章 计算学习理论(下) 12.4 VC 维(Vapnik-Chervonenkis dimension)12.4.1 什么是 VC 维12.4.2 增长函数(growth function)、对分(dichotomy)和打散(shattering&…

[Java 并发基础]多线程编程

文章参考: https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/Future.html https://juejin.cn/post/6970558076642394142 文章目录 线程的创建方式继承 Thread实现 Runnable 接口实现 Callable 接口使用 Lambda使用线程池 线程创建相关的 jdk源码Thr…

“死“社群先不要扔,想办法激活一下,隔壁的运营都馋哭了

私域运营已成为当下很多企业寻求增长的标配。在这过程中,社群运营就是极为重要的一个环节。过去我们为了流量,疯狂建群拉人。但建社群容易活跃难,活跃一段时间后,社群会越来越安静。 不仅如此,群主和管理员也渐渐疏于…

优化器刺客之limit 1--Order by col limit n 代价预估优化探索

一、现象 order by 排序加了limit后更慢了? test# explain analyze select userid from dba_users where username like %aaaaaaaaaaaaaaaaaa% order by userid ;QUERY PLAN --------------…

CentOS7中安装ElasticSearch

文章目录 检测是否安装了Elasticsearch安装JDK下载java配置 下载Elasticsearch解压安装Elasticsearch修改配置文件启动Elasticsearch常见问题 ElasticSearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口。Elasti…

【数据结构 02】队列

一、原理 队列通常是链表结构,只允许在一端进行数据插入,在另一端进行数据删除。 队列的特性是链式存储(随机增删)和先进先出(FIFO:First In First Out)。 队列的缺陷: 不支持随机…

【C/C++】C/C++编程——整型(一)

整型 C 中的整型是基本的数据类型之一,用于表示没有小数部分的数。这包括正整数、负整数以及零。C 提供了多种整型,以适应不同大小的数值需求和优化内存使用。 整型的种类 C 中的整型可以根据其大小(即占用的字节数)和能够表示…

方法阻塞的解决方案之一

1、简单使用 一个h一个cpp文件 #pragma once #include <iostream> #include <thread> #include <atomic> #include <chrono> #include <string>class Person {public:struct dog {std::string name;int age;};public:void a(std::atomic<bo…

笔记本从零安装ubuntu server系统+环境配置

文章目录 前言相关链接ubuntu Server 安装教程屏幕自动息屏关上盖子不休眠MobaXterm外网SSH内网穿透IPV6远程 为什么我要笔记本装Linux为什么要换ubuntu Server版能否连接wifi之后Linux 配置清单总结 前言 之前装了个ubuntu desktop 版&#xff0c;发现没有命令行&#xff0c;…

《HTML 简易速速上手小册》第4章:HTML 的表单与输入(2024 最新版)

文章目录 4.1 表单的基础&#xff08;&#x1f4dd;&#x1f680;&#x1f4ac; 开启沟通的大门&#xff09;4.1.1 表单基础知识点4.1.2 基础示例&#xff1a;创建一个简单的注册表单4.1.3 案例扩展一&#xff1a;创建一个调查问卷4.1.4 案例扩展二&#xff1a;创建一个预订表单…