如何在 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 和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。这样，测试数据就存在于一个完全不同的环境中，并提供了清晰的关注点分离。如果您不想使用第三方工具，您也可以只创建一个简单的本地快速应用程序，该应用程序只返回硬编码的 JSON。