解读vue3.0源码管理项目

在 vue3.0中，它使用 monorepo 来管理项目代码。 那么 monorpo 是什么？ 让我们从维基百科上关于“ monorpo”的条目开始:

---- In the version control system, it is a software development strategy monorepo many project code stored in the same repository.

简单分析理解，「Monorepo」指一种将多个企业项目放到自己一个数据仓库的一种资源管理系统项目的策略。当然，这只是概念上的理解。而对于学生实际应用开发中的场景，「Monorepo」的使用方法通常是可以通过 yarn 的 workspaces 工作发展空间，又或者是 lerna 这种具有高度封装的第三方支付工具库来实现。使用「Monorepo」的方式来管理研究项目会给社会我们生活带来以下解决这些好处：

只有一个仓库，你可以轻松地管理多个项目

可以进行管理方式不同项目中的相同第三方依赖，做到依赖的同步发展更新

可以使用其他项目的代码清楚地构建项目之间的依赖关系

Vue3.0采用纱线工作空间的方法来管理整个项目，工作空间的功能在封装。 Json 中有两个语句不同于普通语句:

{

“Private“: true,

“workspaces“: [

“packages/*“

]

}

其中 “private“: true 的作用是能够保证了工作区的安全，避免被其他企业引用， “workspaces“ 则是一个用来进行声明自己工作区所包含的项目的位置，很显然它可以通过声明需要多个，而 packages/* 指的是 packages 文件夹下的所有工程项目。并且，「Vue3.0」中对工作区的声明中国也是 pacakges/*，所以它的目录管理结构发展会是我们这样：

...

|—— packages

| ----编译内核

| ----编译器的DOM

|———— compiler-sfc

|———— compiler-ss

| ----反应

哈佛，哈佛，哈佛，时间核心

|———— runime-dom

| ----运行测试

| ---- rendering server

|———— shared

大小检查

|———— template-explorer

|———— vue

global.dt.s

package.json

在这里，我只显示包文件目录的package.json，至于其他的目录有兴趣的同学，可告知自己。

可以通过看到，packages 文件目录下我们根据「Vue3.0」实现所需要的能力划分了企业不同的项目，例如 reactivity 文件目录下他们就是和 reactivity API 相关的代码，并且它的内部的结构发展会是一个这样：

|—— __tests__              ＃＃ 测试用例

|—— src                    ＃＃ reactive API 实现企业相关信息代码

api.extractor.json

index.js

LICENSE

Bag. json＃ response API implement relevant code

README.md

反应性项目文件里面还有一个包。 Json 文件，也就是说，正如我们上面提到的，包文件目录中的文件对应于每个项目。 那么，包裹。 在每个项目中。 Json 对应于更改项目的依赖项、条目、包的一些配置，等等。

的“Vue3.0”使用“Monorepo”的方法来管理这个项目的好处是，我们可以利用它的一些能力单独的API，而不是只是用它在“Vue公司”项目。典型的例子是，我们可以在/反应性的反应性安装API包由对应NPM NPM I @ VUE单独，从而使用观察者模式的反应性API实现别处。

当然，使用「Monorepo」还需要进行思考诸多影响其他社会问题，例如增量编译、多任务编译等等，有兴趣以及同学我们可以选择自行去了解。

总结

因此，在短暂的“Vue3.0”之后是“Monorepo”的方法来管理项目。我认为我们必须明白的心，如果我们需要理解“Vue3.0”如何实现一个模板编译器，运行+独特的编译器，虚拟DOM实施等原则的结合，我们可以从包目录中的每个文件研究其实现文件开始。

bat一线互联网面试真题详解企业及项目开发实战详解

可以添加前端学习群：1017810018 大家一起学习

小助理微信：hxhn_7758

lyf___1201