在前端开发中，自动化构建和部署变得越来越重要，这些工具可以大大提高开发效率。在 npm 丰富的包库中，有一个名叫 npm-scripts-watcher 的包，它可以帮助我们自动跟踪文件并运行脚本。
安装
要使用 npm-scripts-watcher，首先需要全局安装它。
--- ------- -- -------------------
使用
在项目中使用 npm-scripts-watcher 前，需要首先在 package.json 文件中添加 scripts 和 watch 字段。如下所示：
-
------- -------------
---------- --------
---------- -
-------- ----- ----------
------- ------- ---
------- ------ ----------
--
-------- -
------ ---- --- ------
------- ---- -----
-
-在上述配置中，我们已经定义了三个脚本：start、lint、test。同时，我们还定义了两个要监视的目录：src 和 test。src 目录中的任何文件更改都会触发 lint 命令，test 目录的变更则会触发 test 命令。
要启动监听程序，请在终端中输入以下命令：
--- --- -----
此时，npm-scripts-watcher 将会自动监视 src 和 test 目录，并在文件更改时运行相应的命令。
注意：npm-scripts-watcher 会在系统中执行与运行脚本相同的命令。因此，请确保定义的命令已经正确安装和配置。
示例
例如，我们假设已经创建了一个名为 index.js 的 JavaScript 文件，并将其放置在 src 目录下。这个文件只是简单地输出一行 Hello, world!：
------------------- ---------
现在我们将 src 目录添加到 watch 字段中，并为其定义一个命令，当此目录中的任何文件更改时，将触发此命令。在本例中，我们选择运行 node index.js 来启动应用程序。我们还可以添加一个钩子，以在运行脚本之前先运行 npm run lint 检查代码，如下所示：
-
------- -------------
---------- --------
---------- -
-------- ----- ----------
------- ------- ---
------- ------ ----------
--
-------- -
------ ---- --- ---- -- ---- ---------
-
-在终端中运行 npm run watch 后，npm-scripts-watcher 将在后台继续运行，监视 src 目录。现在，我们可以修改 index.js 中的消息，并观察输出结果：
------------------- -----------------------
此时，npm-scripts-watcher 将会在控制台上输出正确的结果，即 Hello, npm-scripts-watcher!。同时，如果您在修改文件时违反了任何规则（例如添加了未定义的变量），则 npm-scripts-watcher 将使用 eslint 进行检查，如有错误则会输出相应的警告信息。
总结
通过使用 npm-scripts-watcher，您可以轻松地自动跟踪文件并运行脚本，从而提高了前端开发效率。有了自动化工具的帮助，我们可以更轻松地进行产品开发和测试。对于专业的前端开发人员来说，学习和使用 npm-scripts-watcher 应该是一项必备的技能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedcb1fb5cbfe1ea0612545