在前端开发中，我们经常需要监测文件的变化并执行相应的操作。这时候，npm 包 onchange 就能派上用场了。本文将介绍如何使用 onchange 监测文件变化，并提供详细的教程及示例代码。
安装
我们先来安装 onchange 。可以使用以下命令：
npm install onchange --save-dev
其中，--save-dev 参数表明将该包作为开发依赖进行安装。
语法
onchange 的基本语法如下：
onchange 'pattern' -- <command>
其中，pattern 是需要监测的文件路径模式，可以是单个文件或者通配符匹配的多个文件；<command> 是发生变化时需要执行的命令。
示例
下面我们通过一个简单的示例来演示如何使用 onchange 。假设我们有一个 index.js 文件，当它被修改时，我们希望自动运行测试脚本。
首先，我们需要在 package.json 中定义一个脚本命令：
{
"scripts": {
"test": "mocha"
}
}然后，在命令行中输入以下命令：
onchange 'index.js' -- npm run test
这样，每次修改 index.js 后，npm run test 命令就会自动执行。
更多用法
除了基本语法外，onchange 还支持一些高级用法。例如：
使用通配符
我们可以使用通配符来监测多个文件的变化，如：
onchange 'src/**/*.js' -- <command>
这样就能监测 src/ 目录及其子目录下所有的 js 文件的变化。
处理多个模式
如果需要监测多个不同的文件模式，可以使用 -i 参数，如：
onchange 'lib/*.js' -i 'config/*.json' -- <command>
这样就能同时监测 lib/*.js 和 config/*.json 两种文件类型的变化。
自定义事件
onchange 内置了 add、change 和 delete 三种默认事件。我们也可以自定义事件，如：
onchange '*.md' -e myevent -- <command>
这样当一个 .md 文件被修改时，就会触发名为 myevent 的自定义事件。
总结
使用 onchange 可以方便地监测文件变化并执行相应的操作。本文介绍了 onchange 的基本语法和高级用法，并提供了示例代码。希望本文能够对读者在前端开发中的实际工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/51982