第12章 架构设计与项目结构
vue.js的目录结构
dist存放构建后的文件，可以找到很多不同的vue.js构建版本。
完整版： 构建后的文件同时包含编译器和运行时
编译器： 负责将模板字符串编译成js渲染函数，第三篇内容
运行时： 负责创建vue示例，渲染视图和使用虚拟dom实现重新渲染，基本上包含除编译器外的所有部分
UMD：可以通过<script>标签直接在浏览器中使用。cdn上提供的在线引入的vue，就是运行时＋编译器的UMD版本。
CommonJS: 用来配合较旧的打包工具，比如Browserify或webpack1，默认文件pkg.main只包含运行时的CommonJS版本（vue.runtime.common.js）
ES Module: 用来配合现代打包工具，比如webpack2或Rollup，默认文件(pkg.module)只包含运行时的ES Module版本(vue.runtime.esm.js)
- 完整版 vs 只包含运行时
如果需要在客户端编译模板，那么需要用到编译器，因此需要完整版。当使用vue-loader或vueify时，*.vue文件的模板会在构建是与编译成js，所以最终打包完成的文件不需要编译器，只需要引入运行时的版本即可。对应上文提到的，打包工具里的默认文件只包含运行时的版本。运行时版本的体积比完整版小30%左右，所以尽量引用运行时版本，如果仍希望使用完整版，需要在打包工具里配置。
// webpack
module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack1
}
}
}
// Rollup
const alias = require('rollup-plugin-alias')
rollup({
plugins: [
alias({
'vue': 'vue/dist/vue.esm.js'
})
]
})
// Browserify，需要添加到项目的package.json中
{
"browser": {
"vue": "vue/dist/vue.common.js"
}
}
- 开发环境 vs 生产环境
对于UMD版本来说，开发环境和生产环境的模式是硬编码的：开发环境下使用未压缩的代码，生产环境下使用压缩后的代码。CommonJS和ES Module版本用于打包工具，因此vue不提供压缩后的版本，需要自行将最终的包进行压缩。
此外，这两个版本同时保留原始的process.env.NODE_ENV检测，来决定它们应该在什么模式下运行，我们应当使用适当的打包工具配置来替换这些环境变量，以便控制vue.js的运行模式。把process.env.NODE_ENV替换为字符串字面量，同时让UglifyJS之类的压缩工具完全删除仅供开发环境的代码块，从而减少最终文件的大小
var webpack = require('webpack')
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
]
}
const replace = require('rollup-plugin-replace')
rollup({
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}).then(...)
$ NODE_ENV = production browserify -g envify -e main.js | uglifyjs -c -m > build.js
架构设计
分为核心代码、跨平台相关和公用工具函数。同时，架构其实是分层的，最底层是一个普通的构造函数，最上层是一个入口，将完整的构造函数导出给用户使用。
图
不同平台有不同的入口进行构建操作，而核心代码是通用的，可以在任何平台下运行。
eg: 构建web平台下运行的文件，会选择web平台的入口文件开始构建，这个入口文件最终会导出一个vue构造函数。在导出之前，会向vue构造函数中添加一些方法：先向vue构造函数的prototype上添加一些方法，然后向vue构造函数自身添加一些全局api，接着将平台特有的方法导入进来，最后如果是完整版，再将编译器导入进来，最终将所有代码同vue构造函数一起导出去。
