create-react-app 在构建时排除/包含/更改代码部分答案

【问题标题】：create-react-app exclude/include/change code parts at buildcreate-react-app 在构建时排除/包含/更改代码部分
【发布时间】：2018-01-09 19:57:15
【问题描述】：

我正在开发一个 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 开发环境中是否有办法做到这一点？

提前谢谢你！

【问题讨论】：

【解决方案1】：

我不太确定您的服务器端代码如何处理请求，但是如果您在 ajax 查询中使用相对路径，则在部署到生产环境时不必更改代码。例如，这是一个使用相对路径的 ajax 查询：

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

希望对您有所帮助:)

【讨论】：

【解决方案2】：

创建网络接口时，使用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。

【讨论】：

如果我在浏览器中，它也可以工作吗？我猜不会。但我想我可以检查一下window.location。谢谢！
“在浏览器中”是什么意思？如果您构建您的应用程序并直接在浏览器中运行它？
如果您直接使用 Node.js 运行您的应用程序，应用程序将检测到您处于 development 环境中。如果您构建应用程序并使用 built 版本，应用程序将检测到您处于 production 环境中。
我的意思是我不是在制作一个 React Native 应用程序，而是一个带有 React DOM 的 Web 应用程序。你是说我的 HTML 页面将能够访问 process.env，因为我已经通过 npm start 启动了它？
我通常通过 js 文件启动我的 应用程序，但我认为同样的逻辑适用于您的情况。按照这个逻辑，npm start 将使用 development 环境，npm run build 将使用 **production 环境。

【解决方案3】：

根据docs，开发服务器可以代理您的请求。您可以像这样在package.json 中配置它：

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

另一种选择是向浏览器询问当前位置。当你的 API 和静态文件在同一个后端时，它工作得很好，这在 Node.js 和 React 中很常见。

给你：

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

// fetch(endpoint)

【讨论】：