如何修改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.js文件。在這個js文件中可以看到

function getBrowserEnv() {
  // Attempt to honor this environment variable.
  // It is specific to the operating system.
  // See https://github.com/sindresorhus/open#app for documentation.
  const value = process.env.BROWSER;
  const args = process.env.BROWSER_ARGS
    ? process.env.BROWSER_ARGS.split(' ')
    : [];
  let action;
  if (!value) {
    // Default.
    action = Actions.BROWSER;
  } else if (value.toLowerCase().endsWith('.js')) {
    action = Actions.SCRIPT;
  } else if (value.toLowerCase() === 'none') {
    action = Actions.NONE;
  } else {
    action = Actions.BROWSER;
  }
  return { action, value, args };
}

是否自動啓動瀏覽器是通過環境變量BROWSER進行判斷的。當BROWSER爲none的時候是不會自動啓動瀏覽器的。因此可以進行如下設置：

"scripts": {
    "start": "set BROWSER=none&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

執行npm start後不再自動啓動瀏覽器。

三、總結

同時設置端口和關閉啓動瀏覽器，可以進行如下設置：

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