ts 项目执行js_像开发自己的项目一样开发 vuenext

今天由于忙着写 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 人入门并进阶前端