不同的vue版本
| UMD | CommonJS | ES Module (基于构建工具使用) | ES Module (直接用于浏览器) | |
|---|---|---|---|---|
| 完整版 | vue.js | vue.common.js | vue.esm.js | vue.esm.browser.js |
| 运行时版 | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js | - |
| 完整版 (生产环境) |
vue.min.js | - | - | vue.esm.browser.min.js |
| 运行时版 (生产环境) |
vue.runtime.min.js | - | - | - |
dist目录是打包后的文件列表：
完整版和运行时版的区别
- 运行时版:
我们现在都是使用 vue-cli 进行开发，直接使用 Runtime Only 版本的 Vue.js 的时候，借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 JavaScript。因为是在编译阶段做的，所以运行时的版本要更轻量。
- 完整版：
完整版 = 运行时 + 编译器。我们如果没有对代码做预编译，但又使用了 Vue 的 template 属性并传入一个字符串，则需要在客户端编译模板，如下所示：
// 需要编译器
new Vue({
template: '<div>{{ hi }}</div>'
})
// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})
编译器的作用就是讲模板字符串编译成 render 函数，后面的章节还会有涉及
构建流程
vue的构建有三条命令
{
"script": {
"build": "node scripts/build.js",
"build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
"build:weex": "npm run build -- weex"
}
}
后两条都是基于第一条的，看看 scripts/build.js 做了什么
- 根据
getAllBuilds读取配置 - 根据命令行传入的参数对配置做过滤
- 执行
build方法进行构建, 通过rollup的JS API来构建的，就不展开分析了
接下来看看 getAllBuilds 做了什么，这个方法在 scripts/config.js 中
builds对象的key值，然后执行genConfig方法
分析builds对象
我们先看看builds对象是个啥
web-full-esm，这是用于构建ES Module且是Vue完整版的配置项
entry：表示构建的入口 JS 文件地址dest：表示构建后的 JS 文件地址format：表示构建的格式 cjs, esm umd...
再来分析一下上面使用到的 resolve 函数干了啥：
/做一个分割，然后拿到第一个元素赋值给 base。比如在 web-full-esm配置中，参数 p 是 web/entry-runtime-with-compiler.js，那么 base 则为 web。base 并不是实际的路径，它的真实路径借助了别名的配置，我们来看一下别名配置的代码，在 scripts/alias中：
entry的最终找到了 src/platforms/web/entry-runtime-with-compiler.js.
分析genConfig方法
饶了一大圈，接下来看看 genConfig 的作用
