Vue源码学习一 ———— Vue项目目录
Vue 目录结构
可以在 github
上通过这款 Chrome 插件 octotree 查看Vue的文件目录。也可以克隆到本地。。
Vue 是如何规划目录的
- scripts ------------- 构建相关文件
git-hooks.js
----- 存放 git 钩子alias.js
----- 别名配置文件config.js
------ 生成 rollup 配置build.js
----- 对上面config.js中所有的 rollup配置进行构建replease.sh
----- 自动发布新版本的脚本
- dist ------------- 构建后文件的输出目录
- examples ------------- Vue中的一些例子 demo
- flow ------------- JS中的类型声明,和typeScript差不多,提供强类型
- packages ------------- 存放独立发布的包的目录
- test ------------- 所有测试文件
- src ------------- 包含了源码目录
compiler
-----编译器代码存放的目录, 将 template 变异成 render函数core
----- 存放通用的代码- observer ----- 存放响应系统, 包含数据观测的核心代码
- vdmo ----- 包含虚拟DOM创建和打补丁
- instance ----- Vue构造函数设计相关代码
- global-api ----- Vue构造函数添加全局静态方法和属性的代码
- components ----- 抽象出来的通用组件, 如
keep-alive
server
----- 包含服务器渲染platforms
----- 包含平台特有的相关代码- web ----- web平台
- weex ----- 混合应用
- sfc ----- 包含单文件组件
- shared ----- 通用的辅助代码
- yarn.lock ------------- yarn 锁定文件
- editorconfig ------------- 针对编辑器编码风格的配置文件
- .flowconfig ------------- flow 配置文件
- .babelrc ------------- babel 配置文件
- .eslintrc ------------- eslint 配置文件
- .eslintignore ------------- eslint 忽略配置
- .gitignore ------------- git 忽略配置
Vue的构建配置和输出
Vue有三种不同的构建输出, 是 UMD
、 CommenJS
、ES modules
。在 scripts/config.js的37行 builds对象中能看到
。
配置的入口文件 entry
都是 web/entry-runtime.js
, 但是输出的格式 format
分别是 cjs
、 es
和 umd
。
每个模块的形式还分为: 运行时版
和 完整版
。
运行时版本: web/entry-runtime.js
完整版: web/entry-runtime-with-compiler.js
主要差别是完整版比运行时版多了个 with-compiler.js
, 这个使用用来将template
编译成render
函数的。
为什么要分为运行时版和完整版?
完整版 = 运行版 + Compiler。完整版就比运行时版多了个从 template
编译成 render
函数的过程。 将字符串模块编译成render函数不一定是要等到代码运行的时候去做,可以在构建的时候就完成这一步。所以运行时版
结合构建工具搭配更好,可以减少库的提及,提升性能,还剋以将Compiler
抽离成单独的包。
那完整版是不需要配合构建工具使用的。。
除了运行版和完整版,为啥还分这么多不同的包?
cjs
、es
、umd
直接通过 script 标签直接引入的包是 umd
的, 但是写 Vue 大多数是配合构建工具 webpack
等使用的。cjs
是用于 webpack 1
的, 而es
是适用于 webpack 2+
、rollup
等的。webpack 2+
可以直接加载 ES Modules
,所以适用于es
的包。
Vue package.json文件
scripts下的配置
{
"scripts": {
// 构建 完整版 umd 模块的vue
"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
// 构建 `运行时` `cjs` 模块的vue
"dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs",
// 构建 `运行时` `es` 模块的vue
"dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm",
"dev:test": "karma start test/unit/karma.dev.config.js",
// 构建 vue-server-renderer 包
"dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer",
// 构建 Compiler
"dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:web-compiler ",
"dev:weex": "rollup -w -c scripts/config.js --environment TARGET:weex-framework",
"dev:weex:factory": "rollup -w -c scripts/config.js --environment
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
}
Vue源码学习一 ———— Vue项目目录的更多相关文章
- Vue源码学习1——Vue构造函数
Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...
- Vue源码学习二 ———— Vue原型对象包装
Vue原型对象的包装 在Vue官网直接通过 script 标签导入的 Vue包是 umd模块的形式.在使用前都通过 new Vue({}).记录一下 Vue构造函数的包装. 在 src/core/in ...
- Vue源码学习三 ———— Vue构造函数包装
Vue源码学习二 是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数 来到 src/core/index.js 代码是: import Vue from './instanc ...
- vue 源码学习(一) 目录结构和构建过程简介
Flow vue框架使用了Flow作为类型检查,来保证项目的可读性和维护性.vue.js的主目录下有Flow的配置.flowconfig文件,还有flow目录,指定了各种自定义类型. 在学习源码前可以 ...
- vue 源码学习三 vue中如何生成虚拟DOM
vm._render 生成虚拟dom 我们知道在挂载过程中, $mount 会调用 vm._update和vm._render 方法,vm._updata是负责把VNode渲染成真正的DOM,vm._ ...
- 手牵手,从零学习Vue源码 系列一(前言-目录篇)
系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 手牵手,从零学习Vue源码 系列三(虚拟DOM篇) 陆续更新中... 预计八月中旬更新 ...
- Vue源码学习(一):调试环境搭建
最近开始学习Vue源码,第一步就是要把调试环境搭好,这个过程遇到小坑着实费了点功夫,在这里记下来 一.调试环境搭建过程 1.安装node.js,具体不展开 2.下载vue项目源码,git或svn等均可 ...
- 最新 Vue 源码学习笔记
最新 Vue 源码学习笔记 v2.x.x & v3.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 v2.x.x & v3.x.x ...
- 【Vue源码学习】依赖收集
前面我们学习了vue的响应式原理,我们知道了vue2底层是通过Object.defineProperty来实现数据响应式的,但是单有这个还不够,我们在data中定义的数据可能没有用于模版渲染,修改这些 ...
随机推荐
- HTTP(一)概述
总是觉得HTTP的学习不过就是几页的学习内容罢了,于是就总是没有好好的去学. 我发现我们更愿意通过实例来了解一个东西,不过这里还是添加一下概括的过程吧~ 一个不想看就跳过的概括:输入一个 URL,发生 ...
- 使用Telerik StyleMananger 改变Silverlight Button样式
Telerik 支持更改以下控件样式 System.Windows.Button System.Windows.ScrollViewer System.Windows.CheckBox System. ...
- LeetCode 088 Merge Sorted Array 合并两个有序数组
Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array.Note:You ...
- OpenStack Weekly Meeting 2015.07.17
Reviews(Company) 1 Mirantis 11562 HP 1653 Huawei 15 Reviews(Persons) 1 Ekaterina Chernova ✻ 2852 Kir ...
- 牛客网Java刷题知识点之全局变量(又称成员变量,分为类变量和实例变量)、局部变量、静态变量(又称为类变量)
不多说,直接上干货! 定义类其实就是在定义类中的成员.成员:成员变量<-->属性,成员函数<-->行为. 局部变量在方法内部声明,并且只能在方法内部使用,在外层的方法被调用时被 ...
- Flume NG部署
本次配置单节点的Flume NG 1.下载flume安装包 下载地址:(http://flume.apache.org/download.html) apache-flume-1.6.0-bin.ta ...
- SpringBoot | 第七章:过滤器、监听器、拦截器
前言 在实际开发过程中,经常会碰见一些比如系统启动初始化信息.统计在线人数.在线用户数.过滤敏高词汇.访问权限控制(URL级别)等业务需求.这些对于业务来说一般上是无关的,业务方是无需关系的,业务只需 ...
- 30分钟学会React Hook, Memo, Lazy
我们来学习React 16.8里的新特性. 1. 自行配置好React的环境,推荐你使用Create React APP, 你也可以下载本文档Zip解压到本地直接运行. https://github. ...
- ajax post方式表单提交的注意事项。
当我们创建一个异步对象XMLHttpRequest同时post方式向后台传输数据的时候. 我们要设置异步对象的xhr.setRequestHeader成员的值为 XMLHttpRequest.setR ...
- rem 适配屏幕大小
window.onresize=function(){ var html=document.getElementsByTagName("html")[0]; var width=w ...