如何在 Create React App SPA 中选择性地呈现代码？

如何解决如何在 Create React App SPA 中选择性地呈现代码？

在我的 React 应用程序（使用 Create React App cli 构建，未弹出）中，我设置了它，因此如果没有定义 REACT_APP_API_URL，则它使用模拟数据。

我通过向 redux-api-middleware ala 提供 fakeFetch 函数来做到这一点

import { apiMiddleware as aMl,createMiddleware } from 'redux-api-middleware'
import fakeFetch from 'fixtures/utils/fakeFetch'

const apiMiddleware = apiBase ? aMl : createMiddleware({ fetch: fakeFetch })

// etc... configure the `redux` store with the middleware

这在开发时没问题，但我希望在实际构建以进行部署时，该代码与构建完全分离。

有什么办法可以按照

<% if process.env.REACT_APP_API_URL %>
import { apiMiddleware } from 'redux-api-middleware'
<% else %>
import { createMiddleware } from 'redux-api-middleware'
import fakeFetch from 'fixtures/utils/fakeFetch'

const apiMiddleware = createMiddleware({ fetch: fakeFetch })
<% endif %>

// etc... configure the `redux` store with the middleware

为了防止 webpack 在生产版本中包含我的所有装置/虚假数据，同时为我提供一种在模拟数据与实时数据之间切换的非常简单的方法？

我不想弹出应用程序，但我愿意使用使用 Create React App Configuration Overrides 注入的 webpack 插件。

解决方法

我认为 webpack code-splitting 搭配 dynamic imports 可能是您最好的选择。这样，您的模拟数据会被捆绑，但不会发送到客户端（我认为这是这里的主要目标）。

Button {
  // ...
  Material.highlightedRippleColor: "red"
  // ...
}

我知道这并不能直接回答问题，但附带说明一下，我认为最简洁的方法是使用模拟服务器，例如 mock-server.com。在开发中，您只需在 import { apiMiddleware,createMiddleware } from 'redux-api-middleware' const getMiddleware = async () => { if (process.env.REACT_APP_API_URL) { return apiMiddleware; } else { // loads bundle over network const { default: fakeFetch } = await import('fixtures/utils/fakeFetch'); return createMiddleware({ fetch: fakeFetch }); } } 中使用模拟服务器 url。这样，测试数据存在于完全不同的环境中，并提供了明确的关注点分离。如果您不想使用第三方工具，您也可以创建一个简单的本地快递应用，该应用只返回硬编码的 JSON。