Vue 源码目录结构

Vue源码

学习Vue源码,就从Vue源码目录结构说起吧,从上图左侧最上角的 .circleci 从上往下逐个介绍一下。

.circleci

circleci 持续集成/持续部署的配置文件。持续集成指的是当代码有变更的时候,立即进行构建和测试,反馈运行结果,确定新代码是否可以和原有代码正确的集成在一起。持续部署则指的是当代码有变更的时候,自动进行测试和构建,如果一切顺利就自动部署到服务器上。通过cicleci服务达到持续自动执行软件构建和持续交付的目的。

.github

项目相关的说明文档,包括 issue 模板、以及告知开发者如何参与项目贡献的指南等。

benchmarks

当前项目的一些性能测试的文件,用于和其他竞品如 React、Angular 等框架的性能做比对。每个文件夹下的index.html都可以在浏览器直接打开,查看不同场景的渲染。

dist

dist目录主要是 rollup 执行构建打包后输出的不同版本的 vue 文件,包括了UMD、CommonJS、ESM 的生产包和开发包,以及 vue 压缩版、运行时版本。

examples

该文件夹下存放的是一些 vue 实现的 demo,如下图是 todomvc 运行的截图:

FlOW

flow静态类型检查类型声明文件,定义的一些检查规则。

Flow 是 JavaScript 的静态类型检查器,是通过静态类型推断实现类型检查的。 是 2014 年由 FaceBook 推出的一款工具,使用它就可以弥补 JavaScript 弱类型带来的一些弊端。 可以说它为 JavaScript 提供了更完善的类型系统。

packages

这个文件夹主要存放的是 Vue 服务端渲染、模板编译器以及 weex 构建相关的文件,不同的文件分别被不同的场景使用。例如 vue-server-renderer 用于在服务端渲染一个 Vue 应用,服务端渲染的核心方法是 renderToString,这个方法的输入是一个 Vue 实例,输出是渲染得到的 html 字符串。vue-template-compiler 则是将 Vue 模板编译成render函数,Vue 先将模板 template 解析成抽象语法树 ast,然后通过 ast 生成render函数,通常与 vue-loader 配合使用。

scripts

git-hooks 存放的是 git commit 相关的一些校验规则,如果校验不通过,会阻止提交并抛出错误。类似于项目中使用的 eslint校验,当校验不通过时无法提交代码。

alias 存放的是不同文件夹或者说模块在源代码和测试用例中导入的别名,类似于webpack.config.js中resolve配置项的alias。

const path = require('path')

const resolve = p => path.resolve(__dirname, '../', p)

module.exports = {
  vue: resolve('src/platforms/web/entry-runtime-with-compiler'),
  compiler: resolve('src/compiler'),
  core: resolve('src/core'),
  shared: resolve('src/shared'),
  web: resolve('src/platforms/web'),
  weex: resolve('src/platforms/weex'),
  server: resolve('src/server'),
  sfc: resolve('src/sfc')
}

build.js 存放的打包相关的逻辑,主要功能是处理 rollup 打包的输入输出。config.js 存放的也是 rollup 打包相关的逻辑,包括不同版本 Vue 打包入口和输出文件的配置,以及将 Vue 版本号打包入源码的逻辑。

剩余的文件则是一些其他的配置文件和一些打包预处理脚本。

src

这个文件夹存放的是 Vue 的核心源码,源码根据不同功能分成不同模块,存放到不同的文件夹中。

compiler 目录是模板编译相关,主要功能就是把AST(抽象语法树)转化为Render函数,包括一些预定义指令,解析规则,编译规则等等。

core 目录,vue的核心代码,包括了内置组件、全局API封装、Vue实例化、响应式原理、vdom(虚拟DOM)和一些工具函数等等。

platform 目录跟平台相关相关的一些逻辑处理:

web 就是web端的渲染,编译,运行时等等,以及部分服务端渲染。

weex 是一个框架——一端开发,三端运行。2016年9月Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队,以技术顾问的身份加入 Weex 团队来做 Vue 和 Weex 的 JavaScript runtime 整合,目标是让大家能用 Vue 的语法跨三端。

server 服务端渲染相关

sfc 转化单文件组件(.vue),也就是说是一个解析器。开发过Vue的都应该知道一个单文件组件包括三个部分——模板<template>、脚本<script>、样式<style>,而解析器的目的就是把这个vue文件解析为javascript对象。

shared 共享代码,每个模块都能用的代码。

test

这个文件夹存放的是一些测试用例,包括e2e测试用例、服务端渲染和weex测试用例,以及单元测试用例。

types

TypeScript 类型声明文件。

总结

以上就是 Vue 源码的目录结构,根据不同功能和模块划分到不同的目录下面,耦合度小,看着就很清晰,看文件夹或者文件的名字就能大概推测出其功能。这样组织代码也增强了代码的可维护性,非常值得借鉴并应用到我们的项目中。

发表评论

邮箱地址不会被公开。 必填项已用*标注