VSCode目录文件

packages 结构说明

packages:源码主目录，里面存放的是Vue的核心源码

compiler-* 编译器相关
reactivity-* 响应式相关
runtime-* 运行时相关
说明: 
compile 可以理解为程序编译时，源代码在被编译成为目标文件的时间，或者源代码文件在被转换成为最终可执行的文件时间，即将.vue文件编译成浏览器能识别的.html文件的一些工作
runtime 可以理解为程序运行时，即是程序被编译之后，打开程序并运行它知道程序关闭的时间
reactivity 响应式模块的源码，由于Vue 3整体源码采用的Monorepo规范，所以其下面每个子模块都可以独立编译和打包，从而独立对外提供服务，在使用时采用require(‘@vue/reactivity’)引入，进入reactivity目录下可以看到有对应的package.json文件。



├── compiler-core：编译核心源码
├── compiler-dom：与dom部分编译相关联的源码
├── compiler-sfc：单文件编译部分的源码
├── compiler-ssr：服务端渲染，编译相关的源码
├── reactivity：Vue核心代理Proxy相关的代码，响应式部分
├── runtime-core：运行时相关的核心源码，包含生命周期、vnode、watch等等api
├── runtime-dom：运行时与dom相关的核心源码，包含createApp等的源码
├── runtime-test：vue内部测试所使用的代码
├── server-renderer：服务端渲染代码
├── sfc-playground：Vue3 单文件组件 playground
├── shared：Vue工具库，通用方法
├── size-check：vue内部最简单的一个vue应用，用来测试tree-shaking后的代码体积大小
├── template-explorer：Vue内部使用的编译文件浏览工具
├── vue：Vue的主入口文件
└── vue-compat 可配置的vue2的兼容行为

模块关系图

                     +---------------------+    +----------------------+
                      |                     |    |                      |
        +------------>|  @vue/compiler-dom  +--->|  @vue/compiler-core  |
        |             |                     |    |                      |
   +----+----+        +---------------------+    +----------------------+
   |         |
   |   vue   |
   |         |
   +----+----+        +---------------------+    +----------------------+    +-------------------+
        |             |                     |    |                      |    |                   |
        +------------>|  @vue/runtime-dom   +--->|  @vue/runtime-core   +--->|  @vue/reactivity  |
                      |                     |    |                      |    |                   |
                      +---------------------+    +----------------------+    +-------------------+

配置文件内容说明

package.json

{
  "private": true,
  "version": "3.2.45",
  "packageManager": "pnpm@7.1.0",
  "scripts": {
    "dev": "node scripts/dev.js",
    "build": "node scripts/build.js",
    ...
  },
  "types": "test-dts/index.d.ts",
  // `simple-git-hooks` 一个用于小型开源项目的简单的预提交钩子,简单的预先提交该工具可让您将package.json中的任何命令设置为预提交挂钩
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged",
    "commit-msg": "node scripts/verifyCommit.mjs"
  },
  // `lint-staged`是一个只对将要通过git提交的文件（staged），执行自定义脚本的工具 对将要提交的内容进行lint校验
  "lint-staged": {
    "*.{js,json}": [
      "prettier --write"
    ],
    "*.ts?(x)": [
      "eslint",
      "prettier --parser=typescript --write"
    ]
  },
  "engines": {
    "node": ">=16.11.0"
  },
  "devDependencies": {
  }
}

rollup.config.js

在scripts/build.js文件中都有这么一个函数

await execa(
    'rollup',
    [
      '-c',
      '--environment',
      [
        `COMMIT:${commit}`,
        `NODE_ENV:${env}`,
        `TARGET:${target}`,
        formats ? `FORMATS:${formats}` : ``,
        buildTypes ? `TYPES:true` : ``,
        prodOnly ? `PROD_ONLY:true` : ``,
        sourceMap ? `SOURCE_MAP:true` : ``
      ]
        .filter(Boolean)
        .join(',')
    ],
    { stdio: 'inherit' }
  )

关键就在 '-c' 这个参数上：作用是rollup打包指定使用配置文件 rollup.config.js rollup 配置文件既可以是一个 ES 模块，也可以是一个 CommonJS 模块，这里使用的是后者。并且支持导出单个配置对象，或配置对象数组，这里导出的一个配置对象数组 packageConfigs ，这样做是为了一次打包多个模块或 package 。 rollup 配置文件参考 rollup 命令行接口-配置文件

vue3源码目录