vue 源码学习(一) 目录结构和构建过程简介
Flow
vue框架使用了Flow作为类型检查,来保证项目的可读性和维护性。vue.js的主目录下有Flow的配置.flowconfig文件,还有flow目录,指定了各种自定义类型。
在学习源码前可以先看下Flow的语法 官方文档
目录结构
vue.js源码主要在src下
src
├── compiler # 编译相关
├── core # 核心代码
├── platforms # 不同平台的支持
├── server # 服务端渲染
├── sfc # .vue 文件解析
├── shared # 共享代码
compiler
template的编译
core
core
├── components # 内置组件
├── global-api # 全局 API 封装
├── instance # Vue 实例化,生命周期
├── observer # 观察者,响应式
├── util # 工具函数
├── vdom # virtual DOM
platform
存放2个主要入口,分别打包运行在web和weex上的vue.js
server
支持了服务端渲染
sfc
把.vue文件内容解析成js对象
shared
存放共享方法
vue.js构建
vue
是基于Rollup
构建的,类似于webpack
首先来看下package.json
文件,先看下script
字段:
{
"script":{
"build": "node scripts/build.js",
"build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
"build:weex": "npm run build -- weex",
}
}
这3条都是构建vue的命令,后2条是根据需求添加对应环境参数。运行npm run build
时会执行node scripts/build.js
构建过程
构建过程比较复杂,这里会简化下构建过程,只分析主线流程
进入到scripts/build.js
,
// 从配置文件读取配置,拿到所有构建的path
let builds = require('./config').getAllBuilds()
// 过滤builds
build(builds)
再看下配置文件scripts.config.js
,
let builds= {
'web-runtime-esm': {
entry: resolve('web/entry-runtime.js'),
dest: resolve('dist/vue.runtime.esm.js'),
format: 'es',
banner
},
}
entry
属性表示构建的入口 JS 文件地址,dest
属性表示构建后的 JS 文件地址。format
属性表示构建的格式,cjs
表示构建出来的文件遵循 CommonJS 规范,es
表示构建出来的文件遵循 ES Module
规范。umd
表示构建出来的文件遵循 UMD
规范。
resolve
看下 resovle
方法的定义
const resolve = p => {
const base = p.split('/')[0]
if (aliases[base]) {
return path.resolve(aliases[base], p.slice(base.length + 1))
} else {
return path.resolve(__dirname, '../', p)
}
}
用到了 path.resolve([... paths])
, path.resolve
是 node.js
提供的路径解析方法,可以看下官方文档了解下,主要是从右到左处理给定的路径序列,直到构造出绝对路径.
用resolve('web/entry-runtime.js')
作分析, base
是 web
, 找到 aliases[base]
即真实路径 '../src/platforms/web'
,
entry: resolve('web/entry-runtime.js')
所以最终入口路径是 ../src/platforms/web/entry-runtime.js
,构建生成文件路径是../dist/vue.runtime.esm.js
genConfig()
输入builds前要先将builds转换成rollup打包所对应的配置结构
if (process.env.TARGET) {
module.exports = genConfig(process.env.TARGET)
} else {
exports.getBuild = genConfig
// 返回config组成的数组
exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
}
vue 源码学习(一) 目录结构和构建过程简介的更多相关文章
- vue 源码学习二 实例初始化和挂载过程
vue 入口 从vue的构建过程可以知道,web环境下,入口文件在 src/platforms/web/entry-runtime-with-compiler.js(以Runtime + Compil ...
- Vue源码学习1——Vue构造函数
Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...
- Vue源码学习(一):调试环境搭建
最近开始学习Vue源码,第一步就是要把调试环境搭好,这个过程遇到小坑着实费了点功夫,在这里记下来 一.调试环境搭建过程 1.安装node.js,具体不展开 2.下载vue项目源码,git或svn等均可 ...
- 最新 Vue 源码学习笔记
最新 Vue 源码学习笔记 v2.x.x & v3.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 v2.x.x & v3.x.x ...
- MySQL源码分析以及目录结构 2
原文地址:MySQL源码分析以及目录结构作者:jacky民工 主要模块及数据流经过多年的发展,mysql的主要模块已经稳定,基本不会有大的修改.本文将对MySQL的整体架构及重要目录进行讲述. 源码结 ...
- MySQL源码分析以及目录结构
原文地址:MySQL源码分析以及目录结构作者:jacky民工 主要模块及数据流经过多年的发展,mysql的主要模块已经稳定,基本不会有大的修改.本文将对MySQL的整体架构及重要目录进行讲述. 源码结 ...
- Vue源码学习三 ———— Vue构造函数包装
Vue源码学习二 是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数 来到 src/core/index.js 代码是: import Vue from './instanc ...
- Vue源码学习二 ———— Vue原型对象包装
Vue原型对象的包装 在Vue官网直接通过 script 标签导入的 Vue包是 umd模块的形式.在使用前都通过 new Vue({}).记录一下 Vue构造函数的包装. 在 src/core/in ...
- 【Vue源码学习】依赖收集
前面我们学习了vue的响应式原理,我们知道了vue2底层是通过Object.defineProperty来实现数据响应式的,但是单有这个还不够,我们在data中定义的数据可能没有用于模版渲染,修改这些 ...
随机推荐
- vue.nextTick简单的用法
官方文档: 自己写了一个小demo: <template> <div> <p ref="txt" v-if="show">{ ...
- Element-UI标签页el-tabs组件的拖动排序实现
ElementUI的标签页组件支持动态添加删除,如下图: 但是这个组件不支持标签之间的拖动排序.那么我们自己怎样实现这个功能呢? 有一个叫vuedraggable的组件(https://github. ...
- docker中的镜像中运行Django项目
首先要在镜像中 安装python3 以及 django2.0.4 目前我用的是这两个版本. 进入镜像 创建项目 进入项目中修改setting文件 将引号和星号添加进括号中 ALLOWED_HOSTS ...
- 【easy】278. First Bad Version
有一系列产品,从某个开始其后都不合格,给定一个判断是否合格的函数,找出N个产品中第一个不合格的产品. 正确答案: // Forward declaration of isBadVersion API. ...
- memcache的基本操作
1.linux下启动memcache [root@localhost ~]# memcached -d -m 512 -u root -p 12266 -c 256 参数名称及意义: -d 以守护 ...
- MQTT控制---connect
连接服务端 客户端到服务端的第一个报文必须是CONNECT,且只能发送一次,发送的第二个connect报文当作违规处理并断开连接. 有效载荷包含一个或者多个编码的字段.包括客户端的唯一标识符,Will ...
- 初识C语言(五)
自定义函数 C语言提供了大量的库函数(右侧资料下载中有),比如stdio.h提供输出函数,但是还是满足不了我们开发中的一些逻辑,所以这个时候需要自己定义函数,自定义函数的一般形式: 注意: 1.[]包 ...
- C# 高级编程01----.Net基础介绍
一.C#与.Net 的关系 1)C#语言 1. C#是一种简洁.类型安全的面向对象语言,可以使用C#语言创建可以在.Net Framework上运行的应用程序 2. C# 语言功能取决于.Net 的功 ...
- struts2-第一章-基础用法2
一,回顾 struts2框架搭建步骤 (1)创建maven项目 (2)web.xml配置struts2的核心过滤器(filter) (3)pom.xml配置servlet,struts的依赖 (4)把 ...
- Python-数据类型之元组
一:元组 元组是一个只读列表,可以使用count,index等,但是元组里的元素不能更改,也不能增加,删除 元祖的一级元素不可更改,当一级元素有可变数据类型时,如列表,列表中的元素可变 tup = ( ...