vue3.2.33源码解析 准备工作

vue3.2.33源码解析

1. 准备工作

• vue3源码地址：git地址

• vue2文档地址：文档地址

• vscode 编辑器 打开源码看到目录结构
  root-path.png

• 可以看到源码已经天然的支持了 typescript, 并且使用 rollup进行构建，vue3的核心源码在 packages目录下

  packages
  	compiler-core	核心编译器（平台无关）
  	compiler-dom	dom编译器
  	compiler-sfc	vue单文件编译器
  	compiler-ssr	服务端渲染编译
  	reactivity	响应式模块，可以与任何框架配合使用
  	reactivity-transform
  	runtime-core	运行时核心实例相关代码（平台无关）
  	runtime-dom	运行时dom 关api，属性，事件处理
  	runtime-test	运行时测试相关代码
  	server-renderer	服务端渲染
  	sfc-playground	在线Vue单文件组件调试工具
  	shared	内部工具库,不对外暴露API
  	size-check	简单应用，用来测试代码体积
  	template-explorer	用于调试编译器输出的开发工具
  	vue	面向公众的完整版本, 包含运行时和编译器,是Vue.js的完整源码产生目录
  	vue-compat	可配置的vue2的兼容行为
  	global.d.ts	typescript声明文件

• 我们再看 跟目录下的 package.json 文件

  {
    "private": true,
    "version": "3.2.33", # 当前版本号
    "scripts": { # cmd 指令代码 yarn dev
      "dev": "node scripts/dev.js",
      "build": "node scripts/build.js",
      "size": "run-s size-global size-baseline",
      "size-global": "node scripts/build.js vue runtime-dom -f global -p",
      "size-baseline": "node scripts/build.js runtime-dom runtime-core reactivity shared -f esm-bundler && cd packages/size-check && vite build && node brotli",
      "lint": "eslint --ext .ts packages/*/src/**.ts",
      "format": "prettier --write --parser typescript \"packages/**/*.ts?(x)\"",
      "test": "run-s \"test-unit -- {@}\" \"test-e2e -- {@}\" --",
      "test-unit": "jest --filter ./scripts/filter-unit.js",
      "test-e2e": "node scripts/build.js vue -f global -d && jest --filter ./scripts/filter-e2e.js --runInBand",
      "test-dts": "node scripts/build.js shared reactivity runtime-core runtime-dom -dt -f esm-bundler && npm run test-dts-only",
      "test-dts-only": "tsc -p ./test-dts/tsconfig.json && tsc -p ./test-dts/tsconfig.build.json",
      "test-coverage": "node scripts/build.js vue -f global -d && jest --runInBand --coverage --bail",
      "release": "node scripts/release.js",
      "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
      "dev-compiler": "run-p \"dev template-explorer\" serve",
      "dev-sfc": "run-p \"dev compiler-sfc -- -f esm-browser\" \"dev vue -- -if esm-bundler-runtime \" serve-sfc-playground",
      "serve-sfc-playground": "vite packages/sfc-playground --host",
      "serve": "serve",
      "open": "open http://localhost:5000/packages/template-explorer/local.html",
      "preinstall": "node ./scripts/preinstall.js",
      "prebuild-sfc-playground": "node scripts/build.js compiler reactivity-transform shared -af cjs && node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime && node scripts/build.js compiler-sfc -f esm-browser",
      "build-sfc-playground": "cd packages/sfc-playground && npm run build"
    },
    "types": "test-dts/index.d.ts",
    "tsd": {
      "directory": "test-dts"
    },
    "gitHooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "node scripts/verifyCommit.js"
    },
    "lint-staged": {
      "*.js": [
        "prettier --write"
      ],
      "*.ts?(x)": [
        "eslint",
        "prettier --parser=typescript --write"
      ]
    },
    "engines": {
      "node": ">=16.5.0" # node的最低版本16.5.0
    },
    "devDependencies": { # 各种依赖
      "@babel/types": "^7.12.0",
      "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
      "@microsoft/api-extractor": "^7.15.1",
      "@rollup/plugin-commonjs": "^18.0.0",
      "@rollup/plugin-json": "^4.0.0",
      "@rollup/plugin-node-resolve": "^11.2.1",
      "@rollup/plugin-replace": "^2.3.4",
      "@types/hash-sum": "^1.0.0",
      "@types/jest": "^27.0.1",
      "@types/node": "^16.4.7",
      "@types/puppeteer": "^5.0.0",
      "@typescript-eslint/parser": "^4.1.1",
      "@vue/reactivity": "workspace:*",
      "@vue/runtime-core": "workspace:*",
      "@vue/runtime-dom": "workspace:*",
      "brotli": "^1.3.2",
      "chalk": "^4.1.0",
      "conventional-changelog-cli": "^2.0.31",
      "csstype": "^3.0.3",
      "enquirer": "^2.3.2",
      "esbuild": "^0.14.35",
      "eslint": "^7.7.0",
      "execa": "^4.0.2",
      "fs-extra": "^9.0.1",
      "jest": "^27.1.0",
      "lint-staged": "^10.2.10",
      "lodash": "^4.17.15",
      "marked": "^4.0.10",
      "minimist": "^1.2.0",
      "npm-run-all": "^4.1.5",
      "prettier": "^2.3.1",
      "puppeteer": "^10.0.0",
      "rollup": "~2.38.5",
      "rollup-plugin-node-builtins": "^2.1.2",
      "rollup-plugin-node-globals": "^1.4.0",
      "rollup-plugin-polyfill-node": "^0.6.2",
      "rollup-plugin-terser": "^7.0.2",
      "rollup-plugin-typescript2": "^0.27.2",
      "semver": "^7.3.2",
      "serve": "^12.0.0",
      "todomvc-app-css": "^2.3.0",
      "ts-jest": "^27.0.5",
      "tslib": "^2.3.1",
      "typescript": "^4.2.2",
      "vite": "^2.9.0",
      "vue": "workspace:*",
      "yorkie": "^2.0.0"
    }
  }
  
  

我电脑的node版本是 14.x 要升级成 ^16.5.0以上。可以选择使用 nvm node版本管理器 nvm使用方法参考

• 不难看出使用的是 pnpm 来管理依赖, 那我们就下载 pnpm

  npm install pnpm -g
  # 然后
  pnpm -v
  # 7.0.0 安装成功
  pnpm install
  # 安装依赖
  

• 运行代码

  修改package.json的dev命令

  "dev": "node scripts/dev.js"
  # 改成
  "dev": "node scripts/dev.js --sourcemap"
  

  执行命令

  pnpm dev
  

  能看到这样的输出 packages\vue\dist\vue.global.js， 然后再 vue 目录下看到 dist 文件夹，说明执行成功！