Vue源码之目次构造

2024年4月21日 148次阅读 来源: 一枚蛋Oops

Vue版本：2.6.9

源码结构图

├─ .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版本锁定文件

Vue 差别的构建版本对照

UMDCommonJSES Module (基于构建东西运用)ES Module (直接用于浏览器)
完整版vue.jsvue.common.jsvue.esm.jsvue.esm.browser.js
只包含运行时版vue.runtime.jsvue.runtime.common.jsvue.runtime.esm.js–
完整版 (临盆环境)vue.min.js––vue.esm.browser.min.js
只包含运行时版 (临盆环境)vue.runtime.min.js–––

术语诠释

  • 完整版：同时包含编译器和运行时的版本。
  • 编译器：用来将模板字符串编译成为 JavaScript 衬着函数的代码。
  • 运行时： 用来建立 Vue 实例、衬着并处置惩罚假造 DOM 等的代码。基本上就是撤除编译器的别的统统。
  • UMD：UMD 版本能够经由过程 <script> 标签直接用在浏览器中。jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue 默许文件就是运行时 + 编译器的 UMD 版本 (vue.js)。
  • CommonJS：CommonJS 版本用来合营老的打包东西比方 Browserify 或 webpack 1。这些打包东西的默许文件 (pkg.main) 是只包含运行时的 CommonJS 版本 (vue.runtime.common.js) 。

  • 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 作为模板)，就将须要加上编译器

以上是本期全部内容，欲知后事怎样，请听下回分解<(￣︶￣)↗[GO!]

    原文作者：一枚蛋Oops
    原文地址: https://segmentfault.com/a/1190000018647572
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞