Vue源码学习一

vue 目录结构

可以在 github 上通过这款 chrome 插件 查看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"
    }
  }
}