Nodejs koa-liveload：监视文件变化通知浏览器自动刷新的中间件

Nodejs koa-liveload：监视文件变化通知浏览器自动刷新的中间件

特性：

  • 将tiny-lr服务的script标签自动加入html响应中
  • css文件变化时仅重载变化的css文件，而不是刷新页面
  • 监视js css html文件，自动通知前端刷新，新建的文件和文件夹也可被监视到
  • 可扩展要监视的文件后缀名和忽略的文件夹
  • 测试和生产环境中无效

https://github.com/chemzqm/koa-liveload

webview开发刷新的问题，你懂的

如有问题，请新建issue。


2 回复

Nodejs koa-liveload：监视文件变化通知浏览器自动刷新的中间件

特性：

  • 自动注入 tiny-lr 脚本：将 tiny-lr 服务的脚本标签自动加入 HTML 响应中，使得浏览器能够监听文件变化。
  • CSS 文件变化时仅重载 CSS：当 CSS 文件发生变化时，仅重新加载该 CSS 文件，而不需要刷新整个页面。
  • 监视多种文件类型：监视 JavaScript、CSS 和 HTML 文件，并在这些文件发生变化时自动通知前端进行刷新。同时，也可以监控新创建的文件和文件夹。
  • 可配置文件后缀和忽略目录：允许用户自定义需要监视的文件后缀名以及需要忽略的文件夹。
  • 环境限制：此功能仅在开发环境中有效，在生产环境中将不会生效。

示例代码：

首先，你需要安装 koa 和 koa-liveload 包：

npm install koa koa-liveload

接下来，你可以创建一个简单的 Koa 应用，并集成 koa-liveload 中间件：

const Koa = require('koa');
const app = new Koa();
const liveload = require('koa-liveload');

// 使用 liveload 中间件
app.use(liveload({
  // 可选配置项
  watch: ['public/**/*.{js,css,html}'], // 监视规则
  ignore: ['node_modules/**'], // 忽略的目录
}));

app.use(async ctx => {
  if (ctx.path === '/') {
    ctx.body = `
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Koa LiveReload Example</title>
        <link rel="stylesheet" href="/styles.css">
      </head>
      <body>
        <h1>Hello, World!</h1>
        <script src="/index.js"></script>
      </body>
      </html>
    `;
  } else {
    ctx.body = '404 Not Found';
  }
});

app.listen(3000);
console.log('Server is running on http://localhost:3000');

解释：

  1. 引入依赖：首先引入 koa 和 koa-liveload 模块。
  2. 使用中间件：通过调用 liveload() 函数并传入配置选项来启用中间件。配置选项包括监视的文件路径和需要忽略的目录。
  3. 路由处理：为根路径 / 提供一个简单的 HTML 页面，该页面会自动包含 koa-liveload 注入的脚本标签。
  4. 启动服务器：最后，启动 Koa 服务器，监听端口 3000。

通过这种方式，你可以轻松地实现文件变化时自动刷新浏览器的功能，从而提高开发效率。


koa-liveload 是一个用于 Koa 框架的中间件，它可以监视指定文件的变化，并在文件发生变化时自动通知浏览器进行刷新。以下是如何使用 koa-liveload 的示例代码及简要说明：

安装

首先，你需要安装 koa-liveload 和 koa 及其相关的依赖：

npm install koa koa-liveload

示例代码

const Koa = require('koa');
const koaLiveLoad = require('koa-liveload');

const app = new Koa();

// 使用 koa-liveload 中间件
app.use(koaLiveLoad({
    // 要监视的目录，默认为根目录
    root: __dirname,
    // 需要监视的文件后缀，默认为['.css', '.html', '.js']
    extensions: ['.css', '.html', '.js'],
    // 忽略的目录，默认为空数组
    ignore: ['node_modules']
}));

app.use(async ctx => {
    if (ctx.url === '/') {
        ctx.body = `
            <!DOCTYPE html>
            <html>
            <head>
                <title>koa-liveload Example</title>
            </head>
            <body>
                <h1>Hello, koa-liveload!</h1>
            </body>
            </html>
        `;
    } else {
        ctx.body = '404 Not Found';
    }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

说明

  • root 参数：定义了需要监视的根目录，默认为当前工作目录。
  • extensions 参数：指定了需要监视的文件类型，默认包括 .css, .html, 和 .js 文件。
  • ignore 参数：允许忽略特定的目录，防止它们被监视。

当文件发生变化时，koa-liveload 会自动将相应的脚本标签插入到 HTML 响应中，通知浏览器刷新。对于 CSS 文件的变化，它只会重新加载变化的 CSS 文件，而不会刷新整个页面。

如需了解更多配置选项和细节，请参考 koa-liveload GitHub 仓库。如果有任何问题或建议，欢迎提交 issue。

回到顶部