前言
本文按源碼文件分解解讀了vue-hackernews-2.0開源項目中的一些知識點，作為對項目源碼解讀的細節(jié)補充忧吟。
package.json解讀
該文件提供了四種命令
# install dependencies
npm install # or yarn
# serve in dev mode, with hot reload at localhost:8080
npm run dev
# build for production
npm run build
# serve in production mode
npm start
執(zhí)行npm install
查找package.json中的dependencies和devDependencies字段依疼，然后依次安裝里面的模塊高蜂。
Tips:dependencies與devDependencies的區(qū)別
devDependencies下的模塊椎眯，是開發(fā)環(huán)境需要的依賴項，主要是webpack打包咽袜，js語言轉(zhuǎn)碼(ES6代碼轉(zhuǎn)為ES5代碼)等模塊丸卷，這些模塊不會被部署到生產(chǎn)環(huán)境枕稀。
dependencies下的模塊询刹，是生產(chǎn)環(huán)境需要的依賴項，即運行該包時所需要的依賴項萎坷。
這里可能有疑問凹联，難道生產(chǎn)環(huán)境不需要webpack，js語言轉(zhuǎn)碼等模塊嗎哆档？
答案是：需要蔽挠，但這些模塊不需要部署到生產(chǎn)環(huán)境，僅僅在生成生產(chǎn)環(huán)境所需的部署文件時被使用瓜浸。
執(zhí)行npm run dev
"scripts": {
"dev": "node server",
"start": "cross-env NODE_ENV=production node server",
"build": "rimraf dist && npm run build:client && npm run build:server",
"build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules",
"build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js --progress --hide-modules"
},
查找package.json中的scripts字段對應的對象澳淑，找到dev屬性，并執(zhí)行dev屬性對應的腳本：node server即node server.js插佛，即執(zhí)行server.js
執(zhí)行npm run build
同樣杠巡，找到build屬性，并執(zhí)行：rimraf dist && npm run build:client && npm run build:server雇寇，即刪除dist目錄并執(zhí)行npm run build:client和npm run build:server
對應功能是：設(shè)置環(huán)境變量為production氢拥，同時webpack根據(jù)config.js配置打包生產(chǎn)環(huán)境所需的部署文件
執(zhí)行npm start
同樣，找到start屬性锨侯，并執(zhí)行：cross-env NODE_ENV=production node server嫩海，即通過cross-env模塊設(shè)置NODE_ENV環(huán)境變量為production，并執(zhí)行node server
Tips:為什么是
npm start而不是npm run start?
1.兩者都可以囚痴，因為start為npm內(nèi)置支持的命令叁怪，所以可以直接執(zhí)行，參見npm --help
2.其他三個命令都不是內(nèi)置命令深滚，需要經(jīng)由npm run去執(zhí)行奕谭。
index.template.html解讀
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="shortcut icon" sizes="48x48" href="/public/logo-48.png">
<meta name="theme-color" content="#f60">
<link rel="manifest" href="/manifest.json">
這段html代碼功能：移動端瀏覽器適配及PWA適配
Tips:PWA (progressive web apps)-本質(zhì)上仍然是個網(wǎng)站，但允許直接被放置到移動設(shè)備的桌面上（例如通過chrome瀏覽器的Add to HomeScreen）成箫，而不需要用戶去app store下載安裝應用才能使用展箱，而這與一個網(wǎng)址的快捷方式完全不同，因為這種web app提供了一種接近原生app的用戶體驗蹬昌。
接下來我們在手機(Nexus 6P/Android 7.1)上分別示范下瀏覽器體驗及PWA體驗分別是怎樣的混驰。
瀏覽器體驗：
在Chrome瀏覽器地址欄中輸入項目地址，效果如下：
PWA體驗：
通過Chrome的Add to Homescreen功能，將該站點添加到桌面栖榨。效果如下：
點擊桌面生成的應用圖標后昆汹，可以看到具備了過渡啟動圖界面，而且進入后婴栽，不再是瀏覽器內(nèi)看網(wǎng)站的體驗满粗，地址欄消失了，看起來像是一個原生應用愚争。
現(xiàn)在我們對manifest.json配置做一下改動映皆，來學習幾個參數(shù)的作用。以下三張電機圖標后的啟動圖界面變更分別對應manifest.json的如下三種配置改動：
//1. 主題色：綠色 啟動圖背景色：白色
"background_color": "#f2f3f5",
"display": "standalone",
"theme_color": "#48BB74"
//2. 主題色：綠色 啟動圖背景色：綠色
"background_color": "#48BB74",
"display": "standalone",
"theme_color": "#48BB74"
//3. 主題色：橙色 啟動圖背景色：橙色
"background_color": "#f60",
"display": "standalone",
"theme_color": "#f60"
Tips:
這里用到的manifest.json不要與作為離線緩存的manifest混淆轰枝。
最后來對比感受下非PWA的百度站點VsPWA站點的hackernews在Add to HomeScreen后捅彻，體驗上的差異。
概括下主要的差異：
1.增加了同原生應用一樣的啟動圖過渡界面
2.進入站點后鞍陨，像是原生應用一樣步淹，沒有了地址欄等瀏覽器體驗的痕跡。
3.從點擊圖標開始到瀏覽頁面诚撵，整體的體驗上缭裆，PWA更接近原生應用。
注：PWA更多的特性這里并未應用寿烟，其實PWA可以做的更多澈驼。
