使用npm运行多个并行脚本的分步指南。全局安装npm-run-all包

npm i -g npm-run-all

现在在package.json所在的项目中安装并保存此包

npm i npm-run-all --save-dev

现在以这种方式修改package.json文件中的脚本

"scripts": {
    "server": "live-server index.html",
    "watch": "node-sass scss/style.scss --watch",
    "all": "npm-run-all --parallel server watch"
},

现在运行此命令

npm run all

有关此包的详细信息，请参见给定的链接npm全部运行

由于您可能需要向该脚本中添加越来越多的内容，因此它将变得混乱且难以使用。如果您需要检查一些条件和使用的变量，该怎么办？所以我建议您看看允许使用js创建脚本的google/zx。

简单用法：

安装zx:npm i-g zx添加package.json命令（可选，您可以将所有内容移动到脚本中）：

  "scripts": {
    "dev": "zx ./scripts/dev.mjs", // run script
    "build:dev": "tsc -w", // compile in watch mode
    "build": "tsc", // compile
    "start": "node dist/index.js", // run
    "start:dev": "nodemon dist/index.js", // run in watch mode
  },

创建dev.mjs脚本文件：

#!/usr/bin/env zx

await $`yarn build`; // prebuild if dist is empty
await Promise.all([$`yarn start:dev`, $`yarn build:dev`]); // run in parallel

现在，每当您想启动开发服务器时，只需运行yarn dev或npm run dev。

它将首先编译ts->js，然后在监视模式下并行运行typescrpt编译器和服务器。当您更改ts文件时->它将由tsc重新编译->nodemon将重新启动服务器。

高级编程使用

加载env变量，在监视模式下编译ts，然后从dist-on-changes（dev.mjs）重新运行服务器：

#!/usr/bin/env zx
import nodemon from "nodemon";
import dotenv from "dotenv";
import path from "path";
import { fileURLToPath } from "url";

// load env variables
loadEnvVariables("../env/.env");

await Promise.all([
  // compile in watch mode (will recompile on changes in .ts files)
  $`tsc -w`,
  // wait for tsc to compile for first time and rerun server on any changes (tsc emited .js files)
  sleep(4000).then(() =>
    nodemon({
      script: "dist/index.js",
    })
  ),
]);

function sleep(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

function getDirname() {
  return path.dirname(fileURLToPath(import.meta.url));
}

function loadEnvVariables(relativePath) {
  const { error, parsed } = dotenv.config({
    path: path.join(getDirname(), relativePath),
  });

  if (error) {
    throw error;
  }

  return parsed;
}

我有一个没有任何额外模块的跨平台解决方案。我正在寻找一个可以在cmd.exe和bash中使用的try-catch块。

解决方案是command1||command2，它似乎在两种环境中都一样。因此，OP的解决方案是：

"scripts": {
  "start-watch": "nodemon run-babel index.js",
  "wp-server": "webpack-dev-server",
  // first command is for the cmd.exe, second one is for the bash
  "dev": "(start npm run start-watch && start npm run wp-server) || (npm run start-watch & npm run wp-server)",
  "start": "npm run dev"
}

然后，简单的npm-start（和npm-run-dev）将在所有平台上运行！

来一份老式的Makefile怎么样？

这允许您进行大量控制，包括如何管理子外壳、脚本之间的依赖关系等。

# run both scripts
start: server client

# start server and use & to background it
server:
    npm run serve &

# start the client
client:
    npm start

调用此Makefile，然后您可以键入

让一切开始。因为当您使用ctrl-C时，服务器命令实际上是在start命令的子进程中运行的，所以服务器命令也会停止，这与您自己在shell中备份不同。Make还可以完成命令行，至少在我使用的shell上是这样。另外，第一个命令将始终运行，因此您可以在这里自己键入make。

我总是在我的项目中加入一个makefile，这样我就可以在以后快速扫描每个项目的所有常用命令和参数。

npm install npm-run-all --save-dev

package.json：

"scripts": {
  "start-watch": "...",
  "wp-server": "...",
  "dev": "npm-run-all --parallel start-watch wp-server"
}

更多信息：https://github.com/mysticatea/npm-run-all/blob/master/docs/npm-run-all.md

使用同时调用的包。

npm i concurrently --save-dev

然后按如下方式设置npm run-dev任务：

"dev": "concurrently --kill-others \"npm run start-watch\" \"npm run wp-server\""