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的构建配置和输出

猜你喜欢