第12章 架構(gòu)設(shè)計與項目結(jié)構(gòu)
vue.js的目錄結(jié)構(gòu)
dist存放構(gòu)建后的文件，可以找到很多不同的vue.js構(gòu)建版本橄杨。
完整版： 構(gòu)建后的文件同時包含編譯器和運行時
編譯器： 負(fù)責(zé)將模板字符串編譯成js渲染函數(shù)，第三篇內(nèi)容
運行時： 負(fù)責(zé)創(chuàng)建vue示例秋秤，渲染視圖和使用虛擬dom實現(xiàn)重新渲染拖刃，基本上包含除編譯器外的所有部分
UMD：可以通過<script>標(biāo)簽直接在瀏覽器中使用。cdn上提供的在線引入的vue铐拐，就是運行時＋編譯器的UMD版本徘键。
CommonJS: 用來配合較舊的打包工具，比如Browserify或webpack1遍蟋，默認(rèn)文件pkg.main只包含運行時的CommonJS版本（vue.runtime.common.js）
ES Module: 用來配合現(xiàn)代打包工具吹害，比如webpack2或Rollup夺巩，默認(rèn)文件(pkg.module)只包含運行時的ES Module版本(vue.runtime.esm.js)
- 完整版 vs 只包含運行時
如果需要在客戶端編譯模板运悲，那么需要用到編譯器，因此需要完整版洛勉。當(dāng)使用vue-loader或vueify時，*.vue文件的模板會在構(gòu)建是與編譯成js纵穿，所以最終打包完成的文件不需要編譯器下隧，只需要引入運行時的版本即可。對應(yīng)上文提到的谓媒，打包工具里的默認(rèn)文件只包含運行時的版本淆院。運行時版本的體積比完整版小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"
}
}
- 開發(fā)環(huán)境 vs 生產(chǎn)環(huán)境
對于UMD版本來說拷淘，開發(fā)環(huán)境和生產(chǎn)環(huán)境的模式是硬編碼的：開發(fā)環(huán)境下使用未壓縮的代碼，生產(chǎn)環(huán)境下使用壓縮后的代碼指孤。CommonJS和ES Module版本用于打包工具启涯，因此vue不提供壓縮后的版本，需要自行將最終的包進(jìn)行壓縮恃轩。
此外逝嚎，這兩個版本同時保留原始的process.env.NODE_ENV檢測，來決定它們應(yīng)該在什么模式下運行详恼，我們應(yīng)當(dāng)使用適當(dāng)?shù)拇虬ぞ吲渲脕硖鎿Q這些環(huán)境變量补君，以便控制vue.js的運行模式。把process.env.NODE_ENV替換為字符串字面量昧互，同時讓UglifyJS之類的壓縮工具完全刪除僅供開發(fā)環(huán)境的代碼塊挽铁，從而減少最終文件的大小
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
架構(gòu)設(shè)計
分為核心代碼、跨平臺相關(guān)和公用工具函數(shù)敞掘。同時叽掘，架構(gòu)其實是分層的，最底層是一個普通的構(gòu)造函數(shù)玖雁，最上層是一個入口更扁，將完整的構(gòu)造函數(shù)導(dǎo)出給用戶使用。
圖
不同平臺有不同的入口進(jìn)行構(gòu)建操作赫冬，而核心代碼是通用的浓镜，可以在任何平臺下運行。
eg: 構(gòu)建web平臺下運行的文件劲厌，會選擇web平臺的入口文件開始構(gòu)建膛薛，這個入口文件最終會導(dǎo)出一個vue構(gòu)造函數(shù)。在導(dǎo)出之前补鼻，會向vue構(gòu)造函數(shù)中添加一些方法：先向vue構(gòu)造函數(shù)的prototype上添加一些方法哄啄，然后向vue構(gòu)造函數(shù)自身添加一些全局api雅任，接著將平臺特有的方法導(dǎo)入進(jìn)來，最后如果是完整版咨跌，再將編譯器導(dǎo)入進(jìn)來沪么，最終將所有代碼同vue構(gòu)造函數(shù)一起導(dǎo)出去。
