create-react-app在構建時排除/包含/更改代碼部分

Question

我正在開發React Web應用程序，並且正在使用create-react-app npm實用程序。 我的應用程序與服務器通信，該服務器在開發過程中位於我的本地計算機上。 因此，我提出的所有Ajax請求都使用localhost:port地址。

當然，當我要在生產環境中構建和部署項目時，我需要這些地址才能更改為生產環境。 我習慣了preprocess Grunt插件流程（ https://github.com/jsoverson/grunt-preprocess ），該流程可以標記在構建時要排除，包含或更改的部分代碼。

例如：

//@if DEV
const SERVER_PATH = "localhost:8888";
//@endif
//@if !DEV
const SERVER_PATH = "prot://example.com:8888";
//@endif

您是否知道在create-react-app開發環境中是否可以做這種事情？

先感謝您！

Answer 1

我不太清楚您的服務器端代碼如何處理請求，但是如果在ajax查詢中使用相對路徑，則在部署到生產環境時不必更改代碼。 例如，這是一個使用相對路徑的ajax查詢：

$.ajax({
    url: "something/getthing/",
    dataType: 'json',
    success: function ( data ) {
        //do a thing
    }
});

希望有幫助:)

Answer 2

創建networkInterface時，使用process.env.NODE_ENV確定要使用的PATH 。

if (process.env.NODE_ENV !== 'production') {
    const SERVER_PATH = "localhost:8888";
}
else {
    const SERVER_PATH = "prot://example.com:8888";
}

您的應用程序將自動檢測您是在生產還是開發中，因此將為環境創建具有正確值的const SERVER_PATH。

Answer 3

根據docs ，開發服務器可以代理您的請求。 您可以像下面這樣在package.json配置它：

 "proxy": "http://localhost:4000",

另一種選擇是向瀏覽器詢問當前位置。 當您的API和靜態文件位於同一后端（這在Node.js和React中很常見）時，它可以很好地工作。

干得好：

const { protocol, host } = window.location
const endpoint = protocol + host

// fetch(endpoint)