zoukankan      html  css  js  c++  java
  • webpack-dev-server live reloading 技术实现

    webpack-dev-server  live reloading

    https://github.com/webpack/webpack-dev-server

    Use webpack 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, 另外一边网页实现自动更新。

  • 相关阅读:
    Delphi的IDE的快捷键
    XE4 There is no overloaded version GetTextExtentPoint32A
    正确安装DevExpress.ExpressQuantumGrid.Suite For D7
    按比例缩小图片(80分)
    Delphi 2010 新增功能之: TWICImage 类[3]
    Delphi image 等比例缩小
    delphi 图片加水印源代码
    DELPHI窗体属性
    delphi透明panel组件或者制作方法
    利用VB、Delphi轻松实现图像漫游
  • 原文地址:https://www.cnblogs.com/lightsong/p/10468610.html
Copyright © 2011-2022 走看看