今天由于忙着写 OKR 项目，回来已经快 10 点了，洗漱完毕，就迫不及待打开电脑开心学习 vue-next 项目，vue-next 是下一代 vue（vue3.0） 框架的源代码。这个阶段我们的目标是深入学习 Vue，需要深刻理解源码，像开发自己的项目一样来开发 vue-next，体验一下和这些前辈们共事的感觉。说不定还真能提一个 PR。
说干就干
先把 vue-next 项目 clone 到本地：
git clone git@github.com:vuejs/vue-next.git
然后把本地的 vue-next 项目拖到 source-tree（一个 git 客户端） 中，此时便可以看到前辈们的提交代码记录了。我们从作者第一次提交看起，看看作者在第一次都干了什么事情。
我们切到作者的第一次提交的代码（不会切的私聊我），试着跑起来。试想一下，当我们开发一个新项目的时候，通常都会先把项目的技术选型搞定，比如用什么工具打包、采用什么语言。
用了哪些三方库？
直接打开 package.json 文件，非常有意思的是我看到了 fs-extra 这个库，它是我今晚写 OKR 项目时用到的一个库，太巧了。这个库是用来操作文件的，比如创建文件，对 node 的 fs 进行了封装。
chalk：把日志信息以不同颜色输出到控制台；
dts-bundle：把 .d.ts 文件导出一个 moudle；
execa：执行代码的，比如通过代码执行打包命令；
fs-extra：处理文件的，对 fs 进行了封装；
lerna：用来管理项目中使用多个 package；
minimist：解析命令行参数的，就是 args；
prettier：用来控制代码风格的；
roolup：用来打包的，类似 webpack；
typescript：采用 TypeScript 进行编码；
这些三方库大多数主要用来做前端构建使用，说白了就是前端项目的基建，其中我标红的这几个项目非常重要。有兴趣的同学可以自己到 GitHub 找到这些项目的 ReadeMe 深入学习。或者你可以关注 FGD ，每天会推荐一个前端代码库，以「定投」的方式学习。
运行起来看看
在 package.json 文件中可以看到能够执行的脚本。
"scripts": { "dev": "node scripts/dev.js", "build": "node scripts/build.js", "lint": "prettier --write --parser typescript 'packages/*/src/**/*.ts'" },在项目根目录下执行 npm install，然后执行 npm run dev，你会看到如下效果，默认启动的是 runtime-dom 这个 package：
项目正常运行起来了，此时修改 packages 下的代码，这里会实时监听文件的变化。
当执行 npm run dev 时，其实执行的是 scripts/dev.js 这个脚本。在 scripts 目录下还有其它脚本。
├── bootstrap.js ├── build.js // npm run build ├── dev.js // npm run dev ├── utils.js // 工具函数 └── verifyCommit.js // 验证提交信息真正的核心
其实 vue-next 项目真正的核心是 packages 目录下的这几个项目。后面我们会详细学习每个 package 的作用，你可以把这些包看做是一个单独的 npm 包。这些 package 其实使用的是 lerna 这个第三库管理。
├── core ├── global.d.ts ├── observer ├── runtime-dom └── scheduler最后看一看整体的项目结构
├── lerna.json // package 管理 ├── node_modules ├── package.json // npm 管理 ├── packages // 各个模块具体实现，项目源码 ├── rollup.config.js // 打包配置 ├── scripts // 可执行的脚本 ├── tsconfig.json // ts 配置 └── yarn.lock今天我们理解了 vue-next 的技术选型，大家加油！
长按关注
素燕《前端小课》
帮助 10W 人入门并进阶前端
