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

jiezi

5 年前

//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
    ...
}

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

compiler 编译器代码将 template 编译为 render

core 核心代码

- components  全局组件（只有 keep-alive）- global-api  静态属性 和方法
- instance 构造函数 放在 Vue 原型链上的属性和方法
- observer  双向绑定
- util 工具方法
- vdom 虚拟 DOM

platforms 平台代码
server 服务端渲染
sfc 解析.vue 文件
share 通用代码

import Vue from './instance/index'

  引入 Vue 的构造函数，在 Vue.prototype 上面挂载了两个只读属性 $isServer 和 $ssrContext

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

package.json 文件

scripts/config.js

vue 文件分布

core/index