在前端开发过程中，我们经常需要监听文件的变化来进行相应的操作，比如自动编译 LESS/SASS 文件、自动压缩图片、自动刷新浏览器等。而 base-watch 是一个 npm 包，可以帮助我们方便地实现这些操作。本文将为您介绍 base-watch 的使用方法，并提供示例代码以帮助您更好地理解。
安装
您可以通过 npm 安装 base-watch，命令如下：
npm install base-watch --save-dev
注意：base-watch 只能在 Node.js 环境下使用。
使用
在以下示例中，我们将监视文件夹 src 下的所有文件的变化，并在变化时自动执行 webpack。
示例1
-- -------------------- ---- ------- ----- --------- - ---------------------- ----- ------- - ------------------- ----------- ----- ------ ----- --------- --------- -------- -- - -- ---- ------------------------------------ -------- ----- - -- ----- - -------------------- ----- - ---- - --------------------- - --- -- ---展开代码
在该示例中，我们引入了 base-watch 和 webpack，然后通过 baseWatch() 方法创建了一个监视器实例。在实例中，我们指定了要监视的文件夹为 src，并使用 glob 模式指定监视所有文件。然后我们定义了一个回调函数，在回调函数中执行 webpack 编译代码。
示例2
-- -------------------- ---- ------- ----- --------- - ---------------------- ----- ------- - ------------------- ----- ----------- - --------------------------------- ----- ------------- - ---------------------------- ----------- ----- ------ ----- --------- --------- -------- -- - -- ---- ---------------------- -------- ----- - -- ----- - -------------------- ----- - ---- - --------------------- -- ----- --------------------- - --- -- --- -- --------------- ------------------ ------- --------- ---展开代码
在该示例中，除了使用了 webpack 编译代码之外，我们还使用了 browser-sync 创建了一个本地服务器并打开了浏览器。在回调函数中，我们通过 browserSync.reload() 方法实现了在编译完成后自动刷新浏览器的功能。
参数
您可以在创建监视器实例时传递一些参数来定制 base-watch 的行为。
base
- 类型：String
- 默认值：''
指定监视的文件夹路径，可以是相对路径或绝对路径。如果不指定该参数，则默认为当前目录。
glob
- 类型：String
- 默认值：'**/.'
指定监视文件的 glob 模式。
ignore
- 类型：String | Array
- 默认值：null
忽略的文件或文件夹，可以是相对路径或绝对路径。可以使用通配符 *。
delay
- 类型：Number
- 默认值：200
文件变化后延迟多少毫秒执行回调函数。
callback
- 类型：Function
- 默认值：null
文件变化后执行的回调函数。
结语
通过本文，您已经了解了 npm 包 base-watch 的使用方法，并实现了自动编译代码和自动刷新浏览器的功能。您可以根据自己的需要对 base-watch 进行更多的定制。此外，base-watch 还支持 Promise 方式和事件监听方式，您可以前往其官方文档查看更多详细内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69981
