vue2.x调试-入口文件查找

从npm run dev查找路口文件流程图

初始入口package.json

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

第一步：查找配置项的配置文件

当npm run dev时候会运行rollup打包vue，基本配置中：

(1) -w就是–watch作用就是监听源文件是否有改动，如果有改动，重新打包
(2) -c就是–config作用就是设置基本配置文件，此处的基本配置文件是scripts/config.js
(3) --sourcemap 给rollup传递了一个sourcemap
(4) --environment 给rollup传递一个环境变量
(5) TARGET:web-full-dev最终输出的目标是web-full-dev

第二步：查找基础配置文件scripts/config.js中的web-full-dev的配置

2.1 scripts/config.js 文件配置

 '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
  },

entry的入口文件用resolve方法获取web/entry-runtime-with-compiler.js

2.2 查看web/entry-runtime-with-compiler.js位置通过查看resolve方法

const aliases = require('./alias')
const resolve = p => {
    // 基础地址web/xxx.js
    // base地址就是拿到web
  const base = p.split('/')[0]

  // 根据前缀找到base地址
  // 然后用base地址到aliases找到真实路径
  if (aliases[base]) {
    return path.resolve(aliases[base], p.slice(base.length + 1))
  } else {
    return path.resolve(__dirname, '../', p)
  }
}

（1）resolve方法是一个封装方法根据基础地址web/xxx.js，通过p.split(’/’)[0]方法拿到base地址为web
（2）在通过aliases[base]拿到真实路径在通过拼接方法 path.resolve(aliases[base], p.slice(base.length + 1)拼接出真实路径

2.3 查看aliases方法查找到web/entry-runtime-with-compiler.js真实路径

aliases方法在alias.js中

const path = require('path')

const resolve = p => path.resolve(__dirname, '../', p)

module.exports = {
  vue: resolve('src/platforms/web/entry-runtime-with-compiler'),
  compiler: resolve('src/compiler'),
  core: resolve('src/core'),
  shared: resolve('src/shared'),
  // 有一个web的别名指向的是根目录下/platforms/web
  web: resolve('src/platforms/web'),
  weex: resolve('src/platforms/weex'),
  server: resolve('src/server'),
  sfc: resolve('src/sfc')
}

（1）可以查到web的别名指向的位置为src/platforms/web因此可以查找到路口文件位置vue/src/platforms/web/entry-runtime-with-compiler.js
(2) entry-runtime-with-compiler.js 这个版本是完整版本可以携带编译器的