关于vue.js:Vue源码解析入口解析

查看 dist/vue.js 的构建过程
当运行 npm run dev 时指定了配置文件，从配置文件 script/config.js 动手
web-full-dev（web 蕴含编译器和运行时的开发版）

script/config.js 基于 node 的模块

"dev": "rollup -w -c scripts/config.js -m --environment TARGET:web-full-dev"

配置文件 config.js

...
// 判断是否有环境变量 target
if (process.env.TARGET) {module.exports = genConfig(process.env.TARGET)
} else {
  exports.getBuild = genConfig
  exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
}

genrator config 生成配置文件

function genConfig (name) {const opts = builds[name]
  ...
  return config
}

咱们传入的环境变量指向 build 中的带编译器的开发版本

const builds = {
  'web-full-dev': {

    // resolve 把前面的门路转化为绝对路径
    // 理论获取的是 src/platforms/web/entry-runtime-with-compiler.js
    // resolve 办法会找到下面的门路，有别名操作

    entry: resolve('web/entry-runtime-with-compiler.js'), 

    dest: resolve('dist/vue.js'),
    format: 'umd',
    env: 'development',
    alias: {he: './entity-decoder'},

    // 打包出的文件的文件头 banner:banner 函数
    banner 
  }
}

const vm = new Vue({
  el:"#app",
  template:"<h3>Hello Template</h3>",
  render(h) {return h('h4',"Hello Render")
  }
})

从入口文件中，src/platforms/web/entry-runtime-with-compiler.js
- el 是 dom 元素
- el 不能是 body 或 html 标签
- 如果没有 render，把 template 转化成 render 函数
- 如果有 render，间接调用 mount 挂载 DOM
断点调试 $mount 办法
- 留神 npm run build 时并未开启 sourcemap，如果想调试源码须要
- 给 vue.js 增加 //# sourceMappingURL=vue.js.map，可调试 vue.js 源码或批改配置文件增加 -m

因而以后入口文件文件的作用就是重写原型 $mount 办法，对 template 模板进行解决，而后导出 vue 实例（带编译器的版本）
留神与 entry-runtime.js 不同，没有解决 tempalte 代码，间接返回了 vue 实例（运行时版本）

从入口文件反推，找到引入的中央

...
// # src/platforms/web/entry-runtime-with-compiler.js

import Vue from './runtime/index' // Vue 引入的中央
...
export default Vue

此脚本次要是跟 web 平台相干的，对 Vue 构造函数进行解决的脚本
给 Vue 注册平台相干指令，给 Vue 原型上挂载了$mount，__patch__, 导出了 Vue 实例

然而仍然没有看到 Vue 构造函数！

// # platforms/web/runtime/index.js

import Vue from 'core/index'
...
export default Vue

持续查找下面引入的 Vue
core 下的代码是与平台无关的
initGlobalAPI(Vue) 给 Vue 构造函数增加静态方法
然而仍然没有看到 Vue 构造函数！

import Vue from './instance/index'
...
initGalobalAPI(Vue)
...

export default vue

与平台无关的. 终于有 Vue 了
此处不必 class 而用构造函数，起因是因为不便后续给 Vue 原型上挂成员办法
对 vue 实例增加成员, 初始化

...
function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {warn('Vue is a constructor and should be called with the `new` keyword')
  }
  // 在 initMixin 中有这个办法
  this._init(options)
}
...

四个导出 Vue 的模块

src/platforms/web/entry-runtime-with-compiler.js
- web 平台相干的入口
- 重写了平台相干的 $mount()办法
- 注册了 Vue.compile()办法，传递一个 HTML 字符串返回 render 函数
src/platforms/web/runtime/index.js
- web 平台相干
- 注册和平台相干的全局指令:v-model、v-show
- 注册和平台相干的全局组件:v-transition、v-transition-group
- 全局办法:
  - _patch_: 把虚构 DOM 转换成实在 DOM
  - $mount: 挂载办法
src/core/index.js
- 与平台无关
- 设置了 Vue 的静态方法，initGlobalAPI(Vue)
src/core/instance/index.js
- 与平台无关
- 定义了构造函数，调用了 this._init(options)办法
- 给 Vue 中混入了罕用的实例成员

关于vue.js:Vue源码解析入口解析

Vue 入口文件查找

问题：如果同时设置 template 和 render 会执行谁？

解析 entry 所对应的入口文件，并答复下面的问题

问题：Vue 的构造函数在哪？Vue 实例的成员 /Vue 的动态成员从哪里来的？

解析 src/platforms/web/runtime/index.js

解析 src/core/index.js

解析 src/core/instance/index.js

总结：