前言
本文按源码文件分解解读了vue-hackernews-2.0开源项目中的一些知识点,作为对项目源码解读的细节补充。
package.json解读
该文件提供了四种命令
执行npm install
查找package.json中的dependencies和devDependencies字段,然后依次安装里面的模块。
Tips:dependencies与devDependencies的区别
devDependencies下的模块,是开发环境需要的依赖项,主要是webpack打包,js语言转码(ES6代码转为ES5代码)等模块,这些模块不会被部署到生产环境。
dependencies下的模块,是生产环境需要的依赖项,即运行该包时所需要的依赖项。
这里可能有疑问,难道生产环境不需要webpack,js语言转码等模块吗?
答案是:需要,但这些模块不需要部署到生产环境,仅仅在生成生产环境所需的部署文件时被使用。
执行npm run dev
查找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解读
|
|
这段html代码功能:移动端浏览器适配及PWA适配
Tips:PWA (progressive web apps)-本质上仍然是个网站,但允许直接被放置到移动设备的桌面上(例如通过chrome浏览器的Add to HomeScreen),而不需要用户去app store下载安装应用才能使用,而这与一个网址的快捷方式完全不同,因为这种web app提供了一种接近原生app的用户体验。
接下来我们在手机(Nexus 6P/Android 7.1)上分别示范下浏览器体验及PWA体验分别是怎样的。
浏览器体验:
在Chrome浏览器地址栏中输入项目地址,效果如下:
PWA体验:
通过Chrome的Add to Homescreen功能,将该站点添加到桌面。效果如下:
点击桌面生成的应用图标后,可以看到具备了过渡启动图界面,而且进入后,不再是浏览器内看网站的体验,地址栏消失了,看起来像是一个原生应用。
现在我们对manifest.json配置做一下改动,来学习几个参数的作用。以下三张电机图标后的启动图界面变更分别对应manifest.json的如下三种配置改动:
Tips:
这里用到的manifest.json不要与作为离线缓存的manifest混淆。
最后来对比感受下非PWA的百度站点
VsPWA站点的hackernews
在Add to HomeScreen后,体验上的差异。
概括下主要的差异:
1.增加了同原生应用一样的启动图过渡界面
2.进入站点后,像是原生应用一样,没有了地址栏等浏览器体验的痕迹。
3.从点击图标开始到浏览页面,整体的体验上,PWA更接近原生应用。
注:PWA更多的特性这里并未应用,其实PWA可以做的更多。