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)
}
转载于:https://www.cnblogs.com/huangnuoen/p/10237124.html
vue 源码学习(一) 目录结构和构建过程简介相关推荐
- vue 源码学习(一) 目录结构和构建过程简介 1
Flow vue框架使用了Flow作为类型检查,来保证项目的可读性和维护性.vue.js的主目录下有Flow的配置.flowconfig文件,还有flow目录,指定了各种自定义类型. 在学习源码前可以 ...
- vue 源码学习(二) 实例初始化和挂载过程
vue 入口 从vue的构建过程可以知道,web环境下,入口文件在 src/platforms/web/entry-runtime-with-compiler.js(以Runtime + Compil ...
- Vue源码学习 - 准备工作
Vue源码学习 - 准备工作 准备工作 认识Flow 为什么用 Flow Flow 的工作方式 类型推断 类型注释 数组 类和对象 null Flow 在 Vue.js 源码中的应用 flow实践 总 ...
- Vue源码学习 - 组件化(三) 合并配置
Vue源码学习 - 组件化(三) 合并配置 合并配置 外部调用场景 组件场景 总结 学习内容和文章内容来自 黄轶老师 黄轶老师的慕课网视频教程地址:<Vue.js2.0 源码揭秘>. 黄轶 ...
- Vue源码学习 - 组件化一 createComponent
Vue源码学习 - 组件化一 createComponent 组件化 createComponent 构造子类构造函数 安装组件钩子函数 实例化 VNode 总结 学习内容和文章内容来自 黄轶老师 黄 ...
- vue源码学习--vue源码学习入门
本文为开始学习vue源码的思路整理.在拿到vue项目源码的之后看到那些项目中的文件夹,会很困惑,不知道每个文件夹内的世界,怎么变换,怎样的魔力,最后产生了vue框架.学习源码也无从学起.我解决了这些困 ...
- 【物联网】OpenWrt OpenWRT的源码下载及目录结构
OpenWRT的源码下载及目录结构 OpenWrt的源代码管理默认用的是SVN下载: svn co svn://svn.openwrt.org/openwrt/trunk/ . 还可以用Git下载: ...
- Vue源码学习之Computed与Watcher原理
前言 computed与watch是我们在vue中常用的操作,computed是一个惰性求值观察者,具有缓存性,只有当依赖发生变化,第一次访问computed属性,才会计算新的值.而watch则是当 ...
- VUE源码学习第一篇--前言
一.目的 前端技术的发展,现在以vue,react,angular为代表的MVVM模式以成为主流,这三个框架大有三分天下之势.react和angular有facebook与谷歌背书,而vue是以一己之 ...
最新文章
- Tensor基础实践
- echo向文件中写入
- 使用Ceph集群作为Kubernetes的动态分配持久化存储
- 霍夫直线检测python_opencv+python 霍夫直线检测
- 文档扫描识别——OpenCV与C++实现OCR文字识别
- js函数提示 vscode_工欲善其事,必先利其器,VSCode高效插件
- .Net读取xlsx文件Excel2007
- MySQL中函数CONCAT及GROUP_CONCAT 对应oracle中的wm_concat
- 令人惊讶的手机端实时 4K 风格迁移!谷歌又出牛文
- Android API 指南
- 都是用Redis的服务器,12306为啥干不过淘宝???
- 莫烦强化学习-Q Learning
- 1.0 信息化与信息系统
- Hexo添加小部件(Butterfly主题) 添加卡通人物(看板娘)
- HyperV修改分辨率
- Qt 获取 MacBook 设备序列号
- jquery实现HTML复选框变单选框
- 天问一号入轨火星成功,火星,我们来了!
- contains用法
- 只做macd二次金叉_macd二次金叉的定义
热门文章
- BSTR、char* 和 CString 之间的转换 (转)
- 设备场景函数——72个
- hujingwei oracle_Oracle收缩表空间
- html如何让字体自动变色,CSS使文字部分变色
- oracle改了包怎么保存,Oracle存储过程、包、方法使用总结(推荐)
- php设置排序,7种php基本排序实现方法
- nacos配置ap_Nacos 1.0.0 功能预览
- C语言开发笔记(六)实参和形参
- python 示例_带有示例的Python文件关闭属性
- 华为鸿蒙os电视测评,高端技术下放毫不吝啬!华为智慧屏SE系列评测:鸿蒙OS让入门大屏也好用...