2

在我的 React 应用程序（使用 Create React App cli 构建，而不是弹出）中，我设置了它，所以如果没有REACT_APP_API_URL定义，那么它使用模拟数据。

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

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 插件。

4

1 回答 1

1

我认为使用动态导入进行webpack 代码拆分可能是您最好的选择。这样，您的模拟数据将被捆绑，但从未发送到客户端（我认为这是这里的主要目标）。

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

于 2021-03-02T18:22:34.630 回答