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)