- webpack-dev-server live reloading
- https://github.com/webpack/webpack-dev-server
- Use https://webpack.js.org/ with a development server that provides live reloading.
开发者服务器, 实现代码修改后, 自动编译, 自动发布, 浏览器自动刷新动作.
具体实现, 观察推测分析应该使用如下几种技术.
文件变化观测
文件变化后, 会触发后续的一些列动作, 包括 代码编译 -》 构建结果发布 -》 前端浏览器自动刷新.
最关键的一步就是文件被修改了, 如何观测到?
应用层建立观测机制, 不太合理, 否则需要应用层做很多的轮询动作. 所以需要系统支持.
https://zhuanlan.zhihu.com/p/37658721
使用 fs.watch
使用 fs 的另一个内置函数 watch 是更好的选择:
fs.watch(dir, (event, filename) => {});
watch 通过操作系统提供的文件更改通知机制, 在 Linux 操作系统使用 inotify, 在 macOS 系统使用 FSEvents, 在 Windows 系统使用 ReadDirectoryChangesW, 而且可以用来监听目录的变化, 在监听文件夹的场景中, 比创建 N 个 fs.watchfile 效率高出很多.
https://www.ibm.com/developerworks/cn/linux/l-inotify/
inotify 介绍
从文件管理器到安全工具, 文件系统监控对于的许多程序来说都是必不可少的. 从 Linux 2.6.13 内核开始, Linux 就推出了 inotify, 允许监控程序打开一个独立文件描述符, 并针对事件集监控一个或者多个文件, 例如打开, 关闭, 移动 / 重命名, 删除, 创建或者改变属性. 在后期的内核中有了很多增强, 因此在依赖这些特性之前, 请先检查您的内核版本.
查看源码, 服务器端实际使用了 chokidar 库来检测文件变化.
const chokidar = require('chokidar');
编译触发 & 发布
解决了文件变化观测的机制, 在文件检测的回调函数中, 自动触发 开发版本的 webpack 编译, 依据配置 webpack.dev.config.JSON
这个阶段是同步, 执行完毕后, 并将编译结果拷贝到目标文件中.
最后会想浏览器发送消息, 有代码变动的消息, 并指示浏览器进行更新, 辅助开发者调试结果. 如何通知呢?
sockjs 建立实时通信通道
客户端和服务器使用 sockjs 库实现 socket 实时通信, 在后端检测到文件变化, 且编译发布完成后, 会主动通知前端, 前端执行刷新动作.
客户端 sockjs-client
- https://github.com/webpack/webpack-dev-server/tree/master/client-src/sockjs
- 'use strict';
- module.exports = require('sockjs-client');
- https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js
- const sockjs = require('sockjs');
其它
有博客提供了类似的功能的实现方法:
http://www.cnblogs.com/mengbaobao/p/4773662.html
使用开发工具 IDE, ADOBE brackets 也实现了类似功能, 一边写 HTML CSS JS, 另外一边网页实现自动更新.
来源: http://www.bubuko.com/infodetail-2975226.html