[NPM] Run npm scripts when files change with onchange

最新推荐文章于 2025-08-11 16:30:00 发布

转载最新推荐文章于 2025-08-11 16:30:00 发布 · 131 阅读

本文介绍如何利用npm脚本自动执行文件变更时的代码检查与测试任务，包括自动lint代码、运行单元测试等。通过配置npm命令与工具如onchange、npm-run-all等，实现对JavaScript和CSS文件的实时监视及自动化处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

In this lesson we will look at how we can setup our npm scripts to execute when the file system has changed. Some common examples of this are automatically linting your code, running unit tests, or using a pre-processor for your CSS.

Install:

npm i -D onchange

For example, you want to watch all the js file and scss file, to check the tests and lints.

For lints:

    "lint": "npm-run-all lint:**",
    "lint:js": "eslint --cache --fix ./",
    "lint:css": "stylelint '**/*.scss' --syntax scss",
    "lint:css:fix": "stylefmt -R src/",
    "watch:lint": "onchange 'src/**/*.js' 'src/**/*.scss' -- npm run lint",

And for tests:

    "watch": "npm-run-all --parallel watch:*",
    "watch:test": "npm t -- --watch",
    "watch:lint": "onchange 'src/**/*.js' 'src/**/*.scss' -- npm run lint",