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)