1. 前言

vue版本:2.6.11

vue仓库:https://github.com/vuejs/vue

vue文档:https://cn.vuejs.org/

 

2. 开发模式

npm run dev,即运行package.json中的dev命令,其目的是把src/目录下的相关文件打成为dist/vue.js文件。

 

2.1 解析dev命令

首先我们看看package.json中的dev命令:

"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"

rollup:为一个模块打包器,类似于webpack、parcel。相关文档:http://www.rollupjs.com/

-w:--watch 表示监听源文件是否有改动,如果有改动,重新打包;

-c scripts/config.js:表示指定rollup的配置文件为scripts/config.js。

--environment TARGET:web-full-dev:表示在本次执行环境中 Node.js 内的 process.env.TARGET 的值。

 

2.2 scripts/config.js

scripts/config.js 为rollup的配置文件,通过process.env.TARGET('web-full-dev'),可在此文件内找到相关配置信息:

entry:rollup入口文件,实际为 src/platforms/web/entry-runtime-with-compiler.js 文件。

dest:打包后的输出文件。

format:指定打包后的模块类型;这里为 umd 模块。

 

2.3 entry-runtime-with-compiler.js 与 Flow

说明:npm dev命令的最终入口文件地址为 src/platforms/web/entry-runtime-with-compiler.js。

打开文件后,发现里面有些不是常见的JS代码:

这些内容都是与Flow相关的特性。

那么什么是Flow?Flow是JavaScript的静态类型检查工具,目的在于检查JavaScript中的类型错误。类似于TypeScript中的指定类型。

src目录的js都采用了这种写法,可运行 npm run flow 检查是否含有类型错误。查看Flow相关知识可阅读:用Flow编写更好的JavaScript代码

 

3. src目录结构

接下来我们看看src的目录结构:

├── compiler 模板解析相关文件
│   ├── codegen 根据AST生成render函数
│   ├── directives render函数生成之前需要处理的指令
│   └── parser 模板解析
├── core 核心代码
│   ├── components 全局的组件;这里只有keep-alive(缓存不活动的组件实例)
│   ├── global-api 全局方法;如Vue.use,Vue.extend,,Vue.mixin等
│   ├── instance 实例相关内容;包括实例方法,生命周期,事件等
│   ├── observer 双向数据绑定相关文件
│   ├── util 工具方法
│   └── vdom 虚拟dom相关
├── platforms 平台相关内容
│   ├── web web端
│       ├── compiler 编译阶段需要处理的指令和模块
│       ├── runtime 运行阶段需要处理的组件、指令和模块
│       ├── server 服务端渲染相关
│       └── util 工具库
│   └── weex weex端
├── server 服务端渲染相关
├── sfc 即Single File Components;对*.vue文件进行解析
└── shared 共享的工具和枚举

可以看到vue分为了2个平台:web和weex,在这里我们主要以web为目标。

本篇文章不会讲解Vue源代码,后续会以双向绑定、指令、组件等角度来阅读源码。

 

posted on 2020-06-17 16:44  FangMu  阅读(881)  评论(0编辑  收藏  举报