Vue-源码解析-文件入口及分布

37次阅读

共计 962 个字符,预计需要花费 3 分钟才能阅读完成。

package.json 文件

//main 和 module 指定了加载的入口文件,它们都指向运行时版的 Vue,// 一个包内同时发布了两种模块规范的版本。"main": "dist/vue.runtime.common.js",   // 编译后生成的 ES5 版本的代码。"module": "dist/vue.runtime.esm.js",    // 基于 ES6 模块规范的使用 ES5 语法书写的模块。"script": {
    ...
    "dev": rollup -w -c scripts/config.js --environment TARGET:web-full-dev
    ...
}

scripts/config.js

if (process.env.TARGET) {module.exports = genConfig(process.env.TARGET)
} else {
  exports.getBuild = genConfig
  exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
}
const builds = {
    ...
    'web-full-dev': {entry: resolve('web/entry-runtime-with-compiler.js'),
        dest: resolve('dist/vue.js'),
        format: 'umd',
        env: 'development',
        alias: {he: './entity-decoder'},
        banner
      },
      ...
}
// process.env.TARGET 有值所以执行 web-full-dev

vue 文件分布

  • compiler 编译器代码 将 template 编译为 render
  • core 核心代码

    - components  全局组件(只有 keep-alive)- global-api  静态属性 和方法
    - instance 构造函数 放在 Vue 原型链上的属性和方法
    - observer  双向绑定
    - util 工具方法
    - vdom 虚拟 DOM
  • platforms 平台代码
  • server 服务端渲染
  • sfc 解析.vue 文件
  • share 通用代码

core/index

import Vue from './instance/index'
  引入 Vue 的构造函数,在 Vue.prototype 上面挂载了两个只读属性 $isServer 和 $ssrContext


正文完
 0