1. 源码结构

本地部署、源码结构、如何调试

1. 本地部署

源码地址：https://github.com/vuejs/router

# 克隆 repo
$ git clone [e-mail]:vuejs/router.git
$ cd router

# 安装项目的依赖，需要 Node.js 10+ 和 pnpm
$ pnpm install

# 执行脚本
$ pnpm build  # 构建 vue-router
$ pnpm play   # 启动 `playground/` 项目，以便在浏览器上测试和调试
$ pnpm test   # 执行所有检查，包括 test:types, test:types, test:unit, build

Vue Router 使用了 pnpm 包管理器，它支持 monorepo（单一存储库/单体存储库/多包存储库/多项目存储库），也就是可以创建一个 workspace 将多个项目合并到一个仓库中。

.
├── .github
├── .gitignore
├── .npmrc               // 项目的配置文件
├── .prettierignore
├── .prettierrc
├── LICENSE
├── README.md
├── netlify.toml
├── package.json
├── packages             // 项目分包
│   ├── docs             // vue router API 文档
│   ├── playground       // 本地调试项目
│   └── router           // vue router 源码
├── pnpm-lock.yaml       // 依赖版本控制
├── pnpm-workspace.yaml  // 工作空间根目录
└── scripts              // 工程脚本

2. Vue Router 源码

Vue Router 项目位于 ./packages/router/ 文件夹下。

2.1 项目入口

查看 package.json 文件的 scripts 字段：

// 文件 packages/router/package.json
{
    "scripts": {
        "dev": "jest --watch",
        "build": "rimraf dist && rollup -c rollup.config.js",
        ...
    }
}

查看 rollup.config.js 文件，查找 input 配置得到入口文件 src/index.ts：

// 文件 packages/router/rollup.config.js
return {
    input: `src/index.ts`,
    ...
}

2.2 项目结构

Vue Router 项目的源码位于 ./packages/router/src/ 文件夹下。

src/
├── history/  # history 实现，用 `create*History()` 实例化的
├── matcher/  # RouteMatcher 实现，涉及如何正确地匹配 url，也包含 path ranking 逻辑和动态路由部分
├── types/    # 全局 types，在 router 的多个部分里使用
├── utils/    # utility（实用程序）小函数，在 router 的多个部分里使用
├── router.ts    # 包含 router 创建, navigation 执行, 使用 matcher, history 实现, 调用 navigation guards
├── location.ts  # 和 route location 和 urls 相关的 helpers
├── encoding.ts  # 和 url encoding 相关的 helpers
├── errors.ts    # 不同的内部错误和外部错误，及其相关信息
└── index.ts     # 包含所有 export 的公共 API

3. 调试 Vue Router 代码

如 1. 本地部署 中所说，执行 pnpm play 脚本便会启动位于 ./packages/playground/ 文件夹下的 playground 项目，这可以让我们很方便地在浏览器上对 Vue Router 的源码进行调试。

// 文件 packages/playground/package.json
{
    "devDependencies": {
        "vue-router": "workspace:*",
    }
}

$ pnpm play

Scope: 3 of 4 workspace projects
packages/playground play$ vite
│   VITE v3.2.2  ready in 671 ms
│   ➜  Local:   http://localhost:5173/
│   ➜  Network: use --host to expose
└─ Running...