下载源码
git clone git@github.com:vuejs/vue-next.git cd vue-next pnpm i
最新版本的 vue3，必须使用 pnpm 安装依赖，不熟悉 pnpm 的，可以看看官方文档或者这篇文章
构建源码
npm run dev --sourcemap
构建 vue 源码，构建产物会为 packages\vue\dist\vue.global.js 。
由于默认的 vue 打包构建，是不会生成 sourcemap 的，因此我们需要加上 --sourcemap，生成 sourcemap，以方便后面调试时，chrome 能够根据 sourcemap，将构建压缩过的代码，还原成源码。
创建简单的 demo 项目
cd packages mkdir vue-demo
在 vue-demo 中，创建以下 index.html 文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../vue/dist/vue.global.js"></script> </head> <body> <div id="app"> </div> <script> const App = { template:` <p>{{name}}</p> `, setup() { const name = Vue.ref("vue setup") return { name } } } let vm = Vue.createApp(App).mount("#app"); </script> </body> </html>
在 index.html 中，使用 script 直接引入刚刚构建好的 vue.global.js 文件。
然后我们就可以通过 window.Vue 去访问到 Vue 对象了
浏览器预览结果如下：
接下来就可以修改 index.html，调试代码了~
如果我们想使用 vite 的项目，作为 demo，可以继续往下看
创建 vite 的项目
在 packages 文件夹下创建 vite 项目，直接通过脚手架创建
cd packages pnpm create vite cd vite-project pnpm i
创建好项目后，我们进入目录，直接 pnpm i 即可，由于是 monorepo 项目，pnpm 会将本地 vue 安装到项目中
然后我们直接运行 vite 项目的 dev 命令：
cd vite-project npm run dev
会发现有如下报错：
报错地方如下：
try { compiler = require("vue/compiler-sfc"); } catch (e) { try { compiler = require("@vue/compiler-sfc"); } catch (e2) { throw new Error(`@vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.`); } }
这是因为加载 vue/compiler-sfc 或 @vue/compiler-sfc 失败导致的。
为什么会加载失败？原因是，我们并没有对 vue 等一系列的包进行构建.
下面是其中一个包的 package.json
// packages/vue/package.json { "name": "vue", "version": "3.2.23", "description": "The progressive JavaScript framework for buiding modern web UI.", "main": "index.js", "module": "dist/vue.runtime.esm-bundler.js", "types": "dist/vue.d.ts", "unpkg": "dist/vue.global.js" }
main 是node require 时引入会使用到的文件，module 是 es import 引入时会使用到的文件，这两个文件都没有，因为我们并没有构建，没有 dist 目录
因此，我们需要运行一遍构建，在这之前，我们需要把 vite-project 的 package.json 设为 private，这样 vue 才不会把该项目作为 vue 的包进行构建
在 package.json 加入 "private": "true"
// packages/vite-project/package.json { "name": "vite-project", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", "preview": "vite preview" }, "dependencies": { "vue": "^3.2.25" }, "devDependencies": { "@vitejs/plugin-vue": "^2.0.0", "typescript": "^4.4.4", "vite": "^2.7.2", "vue-tsc": "^0.29.8" }, "private": "true" }
修改根目录 package.json
{ "build": "node scripts/build.js --sourcemap", }
执行构建，在根目录运行：
pnpm run build
该命令会对 packages 下的所有包（private 包除外）进行构建，并输出各种格式的产物（cjs、esm等等）
我们需要的是 cjs 和 esm，cjs 是 vite 启动 server 时需要的引入的，而 esm 是 vite 编译时需要使用的
此时在执行以下命令，就可以将 vite demo 跑起来了：
cd vite-project npm run dev —————————————————————————————————————————————————— vite v2.7.7 dev server running at: > Local: http://localhost:3000/ > Network: use `--host` to expose ready in 1231ms.
如果需要修改源码，我们无需每次修改后，重新build，我们只需要对修改的包，重新进行构建即可。
我们可以用 dev 脚本，因为它可以 watch 监听修改，并自动重新构建。
假如需要修改 reactivity 这个包，只需要运行一下这个命令。
{ "dev": "node scripts/dev.js --sourcemap -f esm-bundler reactivity", }
注意输出格式要用 esm-bundler，因为 module 引入的是 reactivity.esm-bundler.js，该文件对应的格式，是 esm-bundler
{ "name": "@vue/reactivity", "module": "dist/reactivity.esm-bundler.js", }
ok，这样又可以愉快的写代码了
