vue3源码学习-1-生成配置信息

发表于 更新于 分类于 阅读次数：

前言

本次主要学习目标是构建一个 vue3 源码的工程项目。需要用到

  1. monorepo 来作为项目管理的主体。

  2. pnpm 作为包管理(pnpm 作为新型的包管理器，最大优势，快，小

  3. 语法选择 typescript，目前较为流行的编程语言，JS 的扩展版

    项目的文件构成截图

    976fc0764a9f61ddd78fb.jpg

开始项目搭建

新建一个文件夹名字就称为 vue3-plan 吧,然后确认是否安装了 pnpm

1
2
3
4
5
6
7
8
9
10
## 查看版本号
pnpm version
## 如果打印出版本信息就表明安装了pnpm

## 如果提示找不到命令的语句，那么只需要安装pnpm就行
## 如果安装失败，可能是node版本过低，我是mac安装了nvm，很轻松切换了v16.15.0
npm install pnpm -g

## 如果你的npm安装速度很慢，不妨试试修改源
npm config set registry https://registry.npm.taobao.org

进入 vue3-plan,初始化项目

1
2
3
## 项目信息初始化
pnpm init -y
## 命令执行完之后会生成一个package.json的文件

文件主体构成

本项目目前作为基础的项目学习，在 vue3-plan 文件夹下新建一个文件夹 packages，以及一个 pnpm-workspace.yaml 的配置文件，该文件时来引导 monorepe 管理项目的

1
2
3
#用来搭建monorepo管理项目
packages:
	- 'packages/*'

安装依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
## 这里先安装vue，后面我们自己写的vue源码会删除它
pnpm install vue
## 如果用上面的语句安装会提示 你需要指定安装的根目录，因为这个依赖我们会全局使用
## 错误提示
## Running this command will add the dependency to the workspace root,
## which might not be what you want - if you really meant it, make it explicit by running this command again with the -w flag (or --workspace-root). If you don't want to see this warning anymore, you may set the ignore-workspace-root-check setting to true.
## 这种警告提示我们使用 -w 来安装到工作根区间
pnpm install vue -w

## 那么我们接下来需要安装typescript，这样才能使用TS语法
## 还需要安装 minimist minimist是一个用于处理命令行调用node指令时，处理node之后的一系列参数的模块。
## 以及esbuild Esbuild, 一个用GO 语言写的Javascript 和Typescript 打包工具，比Webpack 快接近100 倍
## 上面三个都是开发中需要的东西而且模块公用
pnpm install typescript minimist esbuild -w -D

上面 4 个模块安装完之后，这里注意一个问题:幽灵依赖 ,这个是指例如 vue 模块中有个 abc 依赖，这样我们在安装 vue 之后就可以直接使用 abc 模块的东西，但是在未来的时候 vue 不再使用 abc 模块，那么就会出现幽灵依赖的问题。为了不出现这种问题我们在 vue3-plan 的文件夹下建立一个**.npmrc** 文件

1
2
3
## npm 配置文件
## 解决一个问题 例如vue中有个依赖abc ，那么我们安装了vue就可以直接用abd，有一天vue不依赖abc了，那么你用abc就出错了，未来让这种幽灵依赖以后不出错，就在这里配置羞耻提升
shamefully-hoist = tr

删除 node_modules 重新 install 之后你会发现之前 node_module 存在.pnpm 中的模块会出现在 node_module 的根目录下，不推荐这么做，万不得已可以这么做。

功能代码规划

主要功能代码实现都在 packages 文件夹下，例如要实现 reactivity 和 shared 功能，我们直接新建 2 个改名称的文件夹。为了统一的写法。我们采用命令来初始化

1
2
## 进入到packages/reactivity/
pnpm init
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
## 然后修改一下packages.json
{
  "name": "@vue/reactivity",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",

  ## 这里是自己定义加上的参数,参数名随意
  "buildOptions":{
    "name":"VueReactivity",
    "formats":[
      "global", ##全局引用
      "cjs",
      "esm-bundler"
    ]
  }
}

同样的对 shared 也做一样的事情，然后我们在 2 个文件夹下都新建 src 文件夹并在 src 里面新建一个 index.ts 文件，在shared/src/index.ts文件中写入

1
2
3
export const isObject = (value: any) => {
  return value !== null && typeof value === "object";
};

并在reactivity/src/index.ts中写入

1
import { isObject } from "@vue/shared";

在这里先删除 vue 模块，因为这里正常会提示一个错误，无法找到@vue/shared,

1
2
## 删除vue模块
pnpm uninstall vue

那么错误提示找不到模块，那么我们怎么让 shared 和 reactivity 之间关联呢。在 vue3-plan 下建立一个 tsconfig.json 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 也可以通过命令来生成一个json文件
// pnpm tsc --init

//写入下面的配置，解析@vue这个目录
{
  "compilerOptions": {
    "outDir": "dist", //输出目录
    "sourceMap": true, //采用sourceMap
    "target": "es2016", //目标语法
    "module": "esnext", //模块格式
    "moduleResolution": "node", //模块解析方式
    "strict": true, //严格模式
    "resolveJsonModule": true, //解析JSON模块
    "esModuleInterop": true, //允许es6语法引入commonjs模块
    "jsx": "preserve", //js不转译
    "lib": ["esnext", "dom"], //支持的类库esnext及dom
    "baseUrl": ".",
    "paths": {
      "@vue/*": ["packages/*/src"]
    }
  }
}

结束

通过上面的操作，构建了一个基础的 vue 源码学习项目 源代码地址