Windows下如何让独立Git Bash自动选择可用端口运行React项目

问题描述 #

我正在开发React项目，package.json中的scripts配置如下：

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
},

此前使用VS Code内嵌Git Bash终端时，启动多个项目只需打开多个窗口执行npm start，若3000端口被占用，终端会自动选择下一个可用端口。但改用独立Git Bash运行项目后，启动第二个项目时执行npm start会提示Something is already running on port 3000.并退出。尝试过npm start --port=3001、npm start -- --port=3001等方法均无效，需要实现Windows下独立Git Bash自动选端口的功能。

解决方案 #

1. 修改craco配置文件 #

在项目根目录的craco.config.js中添加端口自动检测配置：

const { whenDev } = require('@craco/craco');

module.exports = {
  devServer: whenDev(() => ({
    port: 0, // 设置为0会触发自动选择可用端口
  })),
};

保存配置后执行npm start，项目会自动分配一个未被占用的端口。

2. 通过环境变量指定端口 #

在独立Git Bash中启动项目前，先设置环境变量将端口设为0：

export PORT=0 && npm start

如果希望每次打开Git Bash都自动应用这个设置，可以将export PORT=0添加到Git Bash的配置文件（如~/.bashrc或~/.bash_profile）中，之后每次启动终端都会自动加载该环境变量。

3. 修改package.json的start脚本 #

直接修改scripts中的start命令，添加端口参数：

"scripts": {
    "start": "craco start --port 0",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
},

修改后执行npm start，craco会自动检测并使用可用端口，无需额外输入参数。

内容的提问来源于stack exchange，提问作者Mayeenul Islam