解决windos系统 npm start无法同时启动React应用与JSON Server的问题

问题描述

在使用React开发过程中，我们经常需要模拟后端API服务，以便前端能够与之交互。json-server是一个非常流行的工具，用于快速搭建一个假的数据服务器。然而，当我们在React项目中尝试同时启动React应用（使用craco）和json-server时，可能会遇到一些困难，特别是当我们在package.json的scripts部分将两者合并为一个命令时。
在package.json中，你可能会看到类似这样的scripts配置：

"scripts": {  
    "start": "craco start && npm run serve",  
    "build": "craco build",  
    "test": "react-scripts test",  
    "eject": "react-scripts eject",  
    "serve": "json-server ./src/data.json --port 3333"  
}

这里的start脚本使用了&&操作符，它意味着craco start命令完成后（实际上，对于开发服务器来说，这通常意味着它永远不会完成，因为它会持续运行），才会执行npm run serve。由于craco start会持续运行，因此npm run serve命令永远不会被执行。

解决办法

并行运行两个服务：

你可以使用 &（在 Unix-like 系统中）或 start（在 Windows 系统中）来并行运行两个命令，而不是顺序执行。但是，请注意，这种方法在不同的操作系统上可能有所不同。

Unix-like 系统（如 Linux/macOS）：

"start": "craco start & npm run serve"

注意：这种方式在后台启动 craco start，你可能看不到它的输出。如果需要同时看到两个服务的输出，可以考虑使用更复杂的工具如 tmux、screen 或 concurrently。

Windows 系统：

"start": "start npm run craco-start & npm run serve"

但这里有个小问题，因为 Windows 的 start 命令会尝试打开一个新的命令行窗口来运行 npm run craco-start，而实际上你可能没有 craco-start 这个脚本。你需要确保 craco start 能在某个方式下并行运行。

使用 concurrently：

concurrently 是一个 npm 包，可以很容易地让你在命令行中并行运行多个命令。首先安装它：

npm install --save-dev concurrently

然后在 package.json 中：

"scripts": {  
  "start": "concurrently \"craco start\" \"npm run serve\"",  
  // 其他脚本...  
}

这样，craco start 和 npm run serve 将同时运行。

总结

对于需要同时运行多个服务的情况并且你是windows系统，推荐使用 concurrently 因为它跨平台且易于使用。