简介
npm 包 watch 是一个用于监视文件变化、并执行相应操作的工具。它可以在前端开发中，帮助我们自动编译、刷新页面等常见操作，从而提高开发效率。
安装
首先，在项目根目录下执行以下命令安装 watch：
npm install --save-dev watch
使用方法
在 package.json 中配置
在项目的 package.json 文件中，添加如下配置：
{
"scripts": {
"watch": "watch 'npm run build' src"
}
}其中，npm run build 表示要执行的命令，src 表示要监视的目录或文件。
直接使用命令行
也可以直接在命令行中使用 watch 命令，例如：
watch 'npm run build' src
这样就会监视 src 目录下的文件变化，并在变化时执行 npm run build 命令。
示例代码
假设我们有一个简单的前端项目，需要编译 less 和 js，同时在文件变化时自动刷新浏览器。
less 编译
首先，我们需要安装 less 和 less-watch-compiler：
npm install --save-dev less less-watch-compiler
然后，在 package.json 中添加如下配置：
{
"scripts": {
"less": "lessc src/less/main.less dist/css/main.css",
"watch:less": "watch 'npm run less' src/less"
}
}其中，lessc 是编译 less 的命令，第一个参数是源文件路径，第二个参数是目标文件路径。
js 编译
我们使用 babel 和 watchify 来编译和打包 js：
npm install --save-dev babel-cli babel-preset-env watchify browserify
然后，在 package.json 中添加如下配置：
{
"scripts": {
"js": "babel src/js -d dist/js",
"browserify": "browserify dist/js/main.js -o dist/bundle.js",
"watch:js": "watch 'npm run js && npm run browserify' src/js"
}
}其中，babel 是将 ES6+ 代码转换为 ES5 的工具，browserify 可以将模块打包成一个文件。
自动刷新浏览器
我们可以使用 live-server 来启动一个本地服务器，并在文件变化时自动刷新页面：
npm install --save-dev live-server
然后，在 package.json 中添加如下配置：
{
"scripts": {
"serve": "live-server dist",
"watch:serve": "watch 'npm run serve' dist"
}
}最后，在命令行中执行 npm run watch:less、npm run watch:js、npm run watch:serve 即可监视文件变化，并自动编译、打包、刷新页面。
结语
watch 是一个非常实用的工具，在前端开发中可以帮助我们提高效率。希望本文能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38324