npm 包 on-file-change 使用教程

在前端开发中，随着项目越来越庞大，文件数量也会越来越多。而当我们修改了某个文件时，如何让页面实时地更新呢？这就需要使用到 on-file-change 这个 npm 包了。

什么是 on-file-change？

on-file-change 是一个可以监听本地文件变化的 npm 包，它能够在本地文件发生变化时触发回调函数，并且支持多个文件同时监听。

如何使用 on-file-change？

使用 on-file-change 非常简单，只需要按照以下步骤进行即可：

1. 安装 on-file-change

npm install on-file-change --save-dev

2. 引入 on-file-change

const onFileChange = require('on-file-change');

3. 监听文件变化

onFileChange({
  files: ['path/to/file1', 'path/to/file2'],
  onFileChange: (filename, path, stats) => {
    // 文件变化时执行的函数
    console.log(`${filename} has been changed.`);
  }
});

4. 示例代码

const onFileChange = require('on-file-change');

onFileChange({
  files: ['app.js', '/src/**/*.js'], // 监听当前目录下的 app.js 和 src 目录下的所有 js 文件
  onFileChange: (filename, path, stats) => {
    console.log(`${filename} has been changed.`);
  }
});

on-file-change 提供的 API

files

要监听的文件路径，可以是一个字符串或者一个字符串数组，默认值为 null。

onFileChange

文件变化时触发的回调函数，接受三个参数：

• filename: 文件名。
• path: 文件路径。
• stats: 文件的状态，包含文件的大小、创建时间、修改时间等。

结论

on-file-change 是一个非常实用的 npm 包，它能够帮助我们监听本地文件的变化，从而实现自动化构建。使用 on-file-change 不仅能提高开发效率，还能让我们更加专注于业务逻辑的开发。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/73071