vue3.2.33源码解析
1. 准备工作
-
可以看到源码已经天然的支持了 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 文件夹，说明执行成功！
