webpack watch触发时如何运行并发脚本？ [英] How do I run concurrent scripts when webpack watch fires?

问题描述

我目前有一个看起来像

"dev":"yarn install && concurrently -k \"npm run webpack\" \"cd dist/ && node App.js\" \"npm run test\" \"npm run lint\""

从逻辑上讲，这将运行webpack，同时启动应用程序，启动和测试。

Logically this runs webpack, starts the app, lints, and tests in parallel.

该脚本中的npm webpack设置了--watch

npm webpack in that script has --watch set

注意：这是给开发人员的。

Note: this is for dev.

• 这会尝试在Webpack打包之前运行该应用程序


• 这是由于观看而重新打包Webpack时不会重新运行该应用程序

• 运行 npm运行webpack 一次


• 当它输出（表示手表已发射并完成）时，运行其他三个命令


• 当发生崩溃时通知我，不要浪费时间运行无法正常工作的东西，而是在修复文件时重试。

• Run npm run webpack once
• When it outputs (meaning the watch fired and finished) run the other three commands
• when something crashes inform me, don't waste time running stuff that won't work, but try again when I fix the file.

我不知道我不知道什么。我怀疑真正的答案可能在webpack配置本身中，或者比并发/监视我的用例更好的工具，或者关于我如何设计的核心想法简直是疯狂。也许我想创建一个使用webpack开发中间件来代替它们的devServer.js？

I don't know what I don't know. I suspect the real answer will be in the webpack config itself potentially, or there's a better tool than concurrently/watch for my use case, or the core idea on how I've designed this is just crazy. Maybe I want to create a devServer.js that uses webpack dev middleware to serve these instead? how would that pull in linting and testing then?

我不知道这个构建的漂亮版本会是什么样。

I don't know what a beautiful version of this build would look like.

关于此如何运行的出色教程/指南/博客。

A great tutorial/guide/blog post about how this 'Should' go.

推荐答案

这就是我要做的；也许有更好的方法：

Here's what I would do; perhaps there's a better way:

"scripts": {
  "dev": "yarn install && concurrently -k \"npm run webpack\" \"npm run watch\"",
  "watch": "onchange \"dist/**/" -- concurrently -k \"cd dist/ && node App.js\" \"npm run test\" \"npm run lint\""
}

这使用 onchange 。 npm run dev 同时启动webpack和onchange。 onchange监视 dist / 中的任何文件更改，并在任何文件更改时运行您的任务。

This uses onchange. npm run dev starts webpack and onchange in parallel. onchange monitors for any file changes in dist/ and runs your tasks when any files change.

此限制方法是直到文件 dist 中的文件更改，您的任务才能运行。您可以通过在运行Webpack之前删除 dist / 来解决此问题。 （使用 rimraf 以跨平台的方式执行此操作。）示例：

The limitation of this approach is that your tasks will not run until files change in dist. You can work around this by deleting dist/ before running webpack. (Use rimraf to do this in a cross-platform way.) Example:

"dev": "yarn install && rimraf dist && concurrently -k \"npm run webpack\" \"npm run watch\""

您可以只使用 rm- rf dist 如果您不关心Windows支持。

You can just use rm -rf dist if you don't care about Windows support.

这篇关于webpack watch触发时如何运行并发脚本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！