VUE源码之目录结构

源码结构图

├─ .circleci                   // 包含CircleCI持续集成/持续部署工具的配置文件
├─ .github                   // 项目相关的说明文档,上面的说明文档就在此文件夹
├─ benchmarks                 // 基准,性能测试文件,Vue的跑分demo,比如大数据量的table或者渲染大量SVG
├─ dist                       // 构建后输出的不同版本Vue文件(UMD、CommonJS、ES 生产和开发包)
├─ examples                   // 部分示例,用Vue写的一些小demo
├─ flow                       // flow 因为Vue使用了 [Flow](https://flow.org/) 来进行静态类型检查,静态类型检查类型声明文件
├─ packages                   // 包含服务端渲染和模板编译器两种不同的NPM包,是提供给不同使用场景使用的
├─ scripts                   // 存放npm脚本配置文件,结合webpack、rollup进行编译、测试、构建等操作(使用者不需要关心)
│   ├─ alias.js              // 模块导入所有源代码和测试中使用的别名
│   ├─ config.js             // 包含在'dist/`中找到的所有文件的生成配置
│   ├─ build.js               // 对 config.js 中所有的rollup配置进行构建
├─ src                        // 主要源码所在位置,核心内容
│   ├─ compiler               // 解析模版相关
│       ├─ codegen            // 把AST转换为Render函数
│       ├─ directives         // 通用生成Render函数之前需要处理的指令
│       ├─ parser              // 解析模版成AST
│   ├─ core                    // Vue核心代码,包括内置组件,全局API封装,Vue 实例化,观察者,虚拟DOM, 工具函数等等。
│       ├─ components          // 组件相关属性,主要是Keep-Alive
│       ├─ global-api          // Vue全局API,如Vue.use,Vue.extend,Vue.mixin等
│       ├─ instance            // 实例化相关内容,生命周期、事件等
│       ├─ observer            // 响应式核心目录,双向数据绑定相关文件
│       ├─ util                // 工具方法
│       └─ vdom                // 包含虚拟DOM 创建(creation)和打补丁(patching) 的代码
│   ├─ platforms               // 和平台相关的内容,Vue.js 是一个跨平台的MVVM 框架(web、native、weex)
│       ├─ web                 // web端
│           ├─ compiler        // web端编译相关代码,用来编译模版成render函数basic.js
│           ├─ runtime         // web端运行时相关代码,用于创建Vue实例等
│           ├─ server          // 服务端渲染
│           └─ util            // 相关工具类
│       └─ weex                // 基于通用跨平台的 Web 开发语言和开发经验,来构建 Android、iOS 和 Web 应用
│   ├─ server                  // 服务端渲染(ssr)
│   ├─ sfc                     // 转换单文件组件(*.vue)
│   └─ shared                  // 全局共享的方法和常量
├─ test                        // test 测试用例
├─ types                       // Vue新版本支持TypeScript,主要是TypeScript类型声明文件
├─ node_modules               // npm包存放目录
|-- .babelrc.js               // babel配置
|-- .editorconfig             // 文本编码样式配置文件
|-- .eslintignore             // eslint校验忽略文件
|-- .eslintrc.js              // eslint配置文件
|-- .flowconfig               // flow配置文件
|-- .gitignore               // Git提交忽略文件配置
|-- BACKERS.md               // 赞助者信息文件
|-- LICENSE                 // 项目开源协议
|-- package.json             // 依赖
|-- README.md               // 说明文件
|-- yarn.lock               // yarn版本锁定文件

不同的构建版本对比

xx UMD CommonJS ES Module (基于构建工具使用) ES Module (直接用于浏览器)
完整版 vue.js vue.common.js vue.esm.js vue.esm.browser.js
只包含运行时版 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js -
完整版 (生产环境) vue.min.js - - vue.esm.browser.min.js
只包含运行时版 (生产环境) vue.runtime.min.js - - -

术语解释

1.完整版:同时包含编译器和运行时的版本。

  1. 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。
  2. 运行时: 用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
  3. UMD:UMD 版本可以通过 <script> 标签直接用在浏览器中。jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue 默认文件就是运行时 + 编译器的 UMD 版本 (vue.js)。
  4. CommonJS:CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。这些打包工具的默认文件 (pkg.main) 是只包含运行时的 CommonJS 版本 (vue.runtime.common.js) 。
  5. ES Module: 从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件:
    • 为打包工具提供的 ESM:为诸如 webpack 2 或 Rollup 提供的现代打包工具。ESM 格式被设计为可以被静态分析,所以打包工具可以利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包。
    • 为这些打包工具提供的默认文件 (pkg.module) 是只有运行时的 ES Module 构建 (vue.runtime.esm.js)。
      为浏览器提供的 ESM (2.6+):用于在现代浏览器中通过 <script type="module"> 直接导入。

注意:如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容

  • Vue版本:2.6.9 源码结构图 Vue 不同的构建版本对比 术语解释 完整版:同时包含编译器和运行时的版本。 ...
    一枚蛋阅读 721评论 0 1
  • 基于vue 2.6.11 目录结构 打包版本 UMDCommonJSES Module完整版vue.jsvue.c...
    Lisa_Guo阅读 236评论 0 0
  • 目录结构 对于目录结构并不需要在看到描述后就完完全全知道所有文件的作用,刚开始知道个大概,在源码解析的过程中慢慢去...
    Ang_e阅读 306评论 0 1
  • 源码目录 对不同构建版本的解释 在 NPM 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。这...
    RiverSouthMan阅读 261评论 0 0
  • 目录结构 Vue的不同构建版本 通过npm run build 打包出所有版本的文件 通过 dist/READMe...
    小妹呀阅读 294评论 0 0