tips

LiveReload

react 种子项目生成工具
create-react-app使用了这种技术

但随着技术的演化，在单页应用中刷新页面意味着客户端状态的全部丢失，特别是复杂的单页应用刷新意味着更大量的重复工作才能回到刷新前的状态，于是社区又捣鼓出了
Hot Module Replacement，简称为 HMR

使用 vue-cli 创建的 webpack 种子项目中就包含这种特性，react-native 也内置了这种特性，来帮助开发者提高效率。

安装项目依赖
livereload 和 http-server

npm i livereload http-server -D
# npm install livereload http-server --save-dev
# yarn add livereload http-server -D

添加 npm script

-    "cover:open": "scripty"
+    "cover:open": "scripty",
+    "client": "npm-run-all --parallel client:*",
+    "client:reload-server": "livereload client/",
+    "client:static-server": "http-server client/"

在页面中嵌入 livereload 脚本

 <body>
   <h2>LiveReload Demo</h2>
+  <script>
+    document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
+      ':35729/livereload.js?snipver=1"></' + 'script>')
+  </script>
 </body>

livereload 是支持在启动时自定义端口的，如果你使用了自定义端口，在页面中嵌入的这段 js 里面的 35729 也需要替换成对应的端口。