欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue源码学习一

程序员文章站 2022-06-05 14:38:07
Vue 目录结构 可以在 上通过这款 Chrome 插件 "octotree" 查看Vue的文件目录。也可以克隆到本地。。 Vue 是如何规划目录的 scripts 构建相关文件 存放 git 钩子 别名配置文件 生成 rollup 配置 对上面config.js中所有的 rollup配置进行构建 ......

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有三种不同的构建输出, 是 umdcommenjses modules。在 scripts/config.js的37行 builds对象中能看到

配置的入口文件 entry都是 web/entry-runtime.js, 但是输出的格式 format分别是 cjsesumd

每个模块的形式还分为: 运行时版完整版

运行时版本: web/entry-runtime.js
完整版: web/entry-runtime-with-compiler.js

主要差别是完整版比运行时版多了个 with-compiler.js, 这个使用用来将template编译成render函数的。

为什么要分为运行时版和完整版?

完整版 = 运行版 + compiler。完整版就比运行时版多了个从 template编译成 render函数的过程。 将字符串模块编译成render函数不一定是要等到代码运行的时候去做,可以在构建的时候就完成这一步。所以运行时版结合构建工具搭配更好,可以减少库的提及,提升性能,还剋以将compiler抽离成单独的包。

那完整版是不需要配合构建工具使用的。。

除了运行版和完整版,为啥还分这么多不同的包?

cjsesumd

直接通过 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"
    }
  }
}