npm包watch-recursively使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm是当前前端开发中最受欢迎的包管理工具，而watch-recursively是npm中一个非常实用的包，主要用于监视文件夹中的文件变化并重新执行特定命令。

这篇文章将介绍npm包watch-recursively的使用教程，并详细解释如何在前端开发中使用该包。希望本文可以为前端开发者提供实用的技术指导。

软件要求

在开始使用npm包watch-recursively之前，你需要确保在你的开发环境中安装了node和npm。

你可以通过下面的命令来安装watch-recursively：

npm install --save-dev watch-recursively

使用watch-recursively包可以很容易地实现监视文件变化的功能，只需在终端中输入以下命令：

./node_modules/.bin/watch-recursively <command> <directory> [options]

其中，<command>参数是在文件变化时要执行的指令或脚本，<directory>参数是要监视的目录。你可以使用[options]进行更多的配置，例如添加忽略列表、延迟执行等。

这里举个例子，当我们想要在文件变化时自动编译我们的React代码，可以使用如下命令：

./node_modules/.bin/watch-recursively babel src -d lib

这个命令会监视src目录下的React代码的变化，当检测到文件变化时会自动使用Babel编译代码并输出到lib目录中。

watch-recursively提供了一些常用的配置选项，让你可以更好地使用该包来满足你的需求。

有时候，我们希望watch-recursively不仅能够监听该目录下的文件变化，还能够监听该目录子目录下文件的变化。你可以使用--recursive选项来实现此功能。

例如，通过以下命令来监听目录及其子目录下的文件变化：

./node_modules/.bin/watch-recursively <command> <directory> --recursive

我们可能只希望在目录中监视特定类型的文件的变化，而忽略其他类型的文件。你可以使用--ignore选项来实现这一功能，该选项后面跟着要忽略的文件或目录的列表。

例如，如果我们想要忽略所有hmtl、css和js以外的文件，可以使用以下命令：

./node_modules/.bin/watch-recursively <command> <directory> --ignore "**/*.{html,css,js}"

在文件变化时没有必要立即执行命令，为了避免频繁地重复执行命令，在重建项目更大的时候也会很有好处。你可以使用--delay选项添加一个延迟执行的时间，单位为毫秒。

例如，如果我们想要延迟300毫秒重新构建文件，可以使用以下命令：

./node_modules/.bin/watch-recursively <command> <directory> --delay 300

下面列出了一些其他实用示例，供你进一步了解watch-recursively的应用场景和使用方法：

监视JavaScript文件的变化，并使用JSHint检测语法错误：
```
watch-recursively "jshint ./*.js" ./
```
监视CoffeeScript文件变化，使用CoffeeScript编译器编译文件：
```
watch-recursively "coffee -o js/ -c coffee/" coffee/
```
监视SASS文件变化，使用SASS编译器编译文件：
```
watch-recursively "sass sass:css" ./
```

watch-recursively包是一个非常实用的npm包，可以方便地监视文件夹中的文件变化并重新执行特定命令。本文介绍了watch-recursively的安装和使用教程，并且对该包的配置选项和使用示例进行了详细说明。希望这篇文章可以为前端开发者提供帮助，让我们更加高效地进行项目开发。

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