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

Question

在我的 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 插件

Answer 1

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

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 });
   }
}

我知道这并没有直接回答问题，但附带说明一下，我认为最干净的方法是使用模拟服务器，例如 mock-server.com。在开发中，您只需在 process.env.REACT_APP_API_URL 中使用模拟服务器 url。这样，测试数据就存在于一个完全不同的环境中，并提供了明确的关注点分离。如果您不想使用第三方工具，您也可以只创建一个简单的本地快速应用程序 returns 硬编码 JSON。

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

How can I selectively render code in a Create React App SPA?

reactjs

webpack

create-react-app

craco