vue源码分析(二)vue.js从何而来?

138 阅读1分钟

这个不用多说,地球人都知道是通过npm生成的,而我们的npm的命令配置一般存在于项目根目录的package.json文件的“scripts”标签字段。

打开“package.json”文件,我们找到如下位置:

"scripts": {

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

}

可以看到第一个dev命名通过“rollup”执行,如果不太了解rollup.js的朋友可以看一下rollup官网的介绍:

rollup官方地址:www.rollupjs.com/

再看一下dev命令:

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

有一个target的参数,值为“web-full-dev”

我们再来找到定义这个命令的地方,路径为(vue/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

}

熟悉webpack打包的人,应该很熟悉这种语法,这就是打包带一个入口文件个输出的文件。

入口:web/entry-runtime-with-compiler.js

生成的文件:dist/vue.js

我们再到入口文件看一下(entry-runtime-with-compiler.js)

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)

  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }
  ......为了不增大篇幅,省略部分代码(大家可自行查看)
  }
  return mount.call(this, el, hydrating)
}

我们看到首先是暂存了一份 mount 对象。

const mount = Vue.prototype.$mount

接着是给Vue.prototype对象上面挂载了一个$mount方法,

然后会去获取 “el” 这个参数,如果“el”是挂载在body或者html上面的话,就会触发一个警告,代码如下:

if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }

最后调用之前暂存的mount变量。