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

前言

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

monorepo来作为项目管理的主体。
pnpm作为包管理(pnpm作为新型的包管理器，最大优势，快，小
语法选择typescript，目前较为流行的编程语言，JS的扩展版

项目的文件构成截图

开始项目搭建

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

## 查看版本号
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,初始化项目

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

文件主体构成

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

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

安装依赖

## 这里先安装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** 文件

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

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

功能代码规划

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

## 进入到packages/reactivity/
pnpm init

## 然后修改一下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文件中写入

export const isObject = (value: any) => {
  return value !== null && typeof value === 'object'
}

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

import { isObject } from '@vue/shared'

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

## 删除vue模块
pnpm uninstall vue

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

// 也可以通过命令来生成一个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源码学习项目源代码地址

目录CONTENT

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

前言