vue-hackernews-2.0 细节解读

前言

本文按源码文件分解解读了vue-hackernews-2.0开源项目中的一些知识点，作为对项目源码解读的细节补充。

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

执行npm install
查找package.json中的dependencies和devDependencies字段，然后依次安装里面的模块。

Tips:dependencies与devDependencies的区别
devDependencies下的模块，是开发环境需要的依赖项，主要是webpack打包，js语言转码(ES6代码转为ES5代码)等模块，这些模块不会被部署到生产环境。
dependencies下的模块，是生产环境需要的依赖项，即运行该包时所需要的依赖项。
这里可能有疑问，难道生产环境不需要webpack，js语言转码等模块吗？
答案是：需要，但这些模块不需要部署到生产环境，仅仅在生成生产环境所需的部署文件时被使用。

执行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属性，并执行dev属性对应的脚本：node server即node server.js，即执行server.js

执行npm run build
同样，找到build属性，并执行：rimraf dist && npm run build:client && npm run build:server，即删除dist目录并执行npm run build:client和npm run build:server
对应功能是：设置环境变量为production，同时webpack根据config.js配置打包生产环境所需的部署文件

执行npm start
同样，找到start属性，并执行：cross-env NODE_ENV=production node server，即通过cross-env模块设置NODE_ENV环境变量为production，并执行node server

Tips:为什么是npm start而不是npm run start?
1.两者都可以，因为start为npm内置支持的命令，所以可以直接执行，参见npm --help
2.其他三个命令都不是内置命令，需要经由npm run去执行。

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)-本质上仍然是个网站，但允许直接被放置到移动设备的桌面上（例如通过chrome浏览器的Add to HomeScreen），而不需要用户去app store下载安装应用才能使用，而这与一个网址的快捷方式完全不同，因为这种web app提供了一种接近原生app的用户体验。

接下来我们在手机(Nexus 6P/Android 7.1)上分别示范下浏览器体验及PWA体验分别是怎样的。
浏览器体验：
在Chrome浏览器地址栏中输入项目地址，效果如下：

open_by_chrome.png

PWA体验：
通过Chrome的Add to Homescreen功能，将该站点添加到桌面。效果如下：

chrome_menu.png chrome_menu_add_to_homescrren.png chrome_add_to_homescrren_pwa.png

点击桌面生成的应用图标后，可以看到具备了过渡启动图界面，而且进入后，不再是浏览器内看网站的体验，地址栏消失了，看起来像是一个原生应用。

pwa_flash_white.png

现在我们对manifest.json配置做一下改动，来学习几个参数的作用。以下三张电机图标后的启动图界面变更分别对应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"

pwa_flash.png pwa_flash_green.png pwa_flash_orange.png

Tips:
这里用到的manifest.json不要与作为离线缓存的manifest混淆。

最后来对比感受下非PWA的百度站点VsPWA站点的hackernews在Add to HomeScreen后，体验上的差异。

pwa.gif

概括下主要的差异：
1.增加了同原生应用一样的启动图过渡界面
2.进入站点后，像是原生应用一样，没有了地址栏等浏览器体验的痕迹。
3.从点击图标开始到浏览页面，整体的体验上，PWA更接近原生应用。
注：PWA更多的特性这里并未应用，其实PWA可以做的更多。