如何修改create-react-app创建的项目的开发环境端口和自动启动浏览器

使用create-react-app创建的项目在使用npm start命令时启动的开发环境server端口为3000并且会自动启动浏览器。本文讨论一下如何修改端口和禁止自动启动浏览器。

一、修改端口

没有修改端口时启动后端口为3000，那么3000是怎么来的呢？打开\node_modules\react-scripts\scripts\start.js可以看到

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';

 没有设置环境变量PORT时会默认为3000端口。

知道了3000端口的来源就知道如何修改端口了。可以设置环境变量PORT改变端口号。如下：

"scripts": {
    "start": "set PORT=9000&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

执行npm start后可以看到端口号已经变为9000。

二、关闭自动启动浏览器

启动浏览器的脚本为\node_modules\react-dev-utils\openBrowser.