随着前端技术不断地发展，前端开发人员的工作日益繁忙，不断地有新的技术和工具出现，以提高生产力。而其中一个不得不提的工具就是 npm 包，它可以帮助我们轻松地管理项目中的依赖和模块。而本文将向大家介绍一个有用的 npm 包 watched-cli，并详细介绍它的使用方法。
watched-cli 是什么
watched-cli 是一个基于 watch 命令实现的文件监测工具，它可以帮助我们在本地开发中实时监测文件变化，并自动刷新浏览器。这个工具可以大大提高我们的开发效率，减少手动刷新浏览器的时间，节省开发时间和精力。
watched-cli 的安装
watched-cli 的安装非常简单，只需要在命令行中运行下面的命令即可：
npm install -g watched-cli
其中，-g 表示全局安装，这样我们就可以在命令行的任何地方使用 watched 命令。
watched-cli 的使用
watched-cli 的默认使用语法如下：
watched [command] [options]
其中，command 表示具体的命令，options 表示可选的参数。
查看帮助文档
我们可以使用 watched help 命令来查看 watched-cli 的帮助文档，命令如下：
watched help
监测文件变化
我们可以使用 watched start 命令来启动文件监测，命令如下：
watched start
这个命令会监测当前目录下所有文件的变化，并且实时刷新浏览器。同时，如果我们需要监测指定的文件夹或者文件，可以在命令后面加上路径，例如：
watched start src/css watched start src/js/index.js
更多选项
我们还可以使用一些其他的选项来定制 watched-cli 的行为，例如：
watched start --port 3000 # 指定服务端口号 watched start --delay 500 # 指定文件变化的延迟时间 watched start --interval 1000 # 指定刷新页面的间隔时间
watched-cli 的示例代码
下面是一个示例代码，以演示 watched-cli 的使用：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------------ ---------- ----- ---------------- ----------------- ------- ------ --------------- ------- ------- ----------- ---------- ------- ------------------------ ------- -------
在上面的代码中，我们引入了两个文件，一个是 style.css，另一个是 index.js。当我们使用 watched-cli 命令启动监测之后，只要我们修改了这两个文件中的任意一个，就可以看到浏览器自动刷新，从而看到最新的效果。
结语
本文向大家介绍了 watched-cli 这个有用的 npm 包，并详细介绍了它的使用方法。希望这篇文章能够帮助大家更加高效地进行前端开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005679381e8991b448e3ed9