Блог

В моем приложении React (созданном с помощью cli Create React App, а не извлеченном) Я настроил его так, что если он не REACT_APP_API_URL определен, то он использует поддельные данные.

Я делаю это, добавляя fakeFetch функцию в redux-api-middleware ala

 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 предотвратить включение всех моих фиктивных / поддельных данных в производственную сборку, предоставляя мне очень простой способ переключения между макетными и реальными данными?

Я не хочу извлекать приложение, но я открыт для использования плагина webpack, который вводится с помощью переопределений конфигурации Create React App.

Я думаю, что разделение кода 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 . При разработке вы просто используете макет URL-адреса сервера process.env.REACT_APP_API_URL . Таким образом, тестовые данные хранятся в совершенно другой среде и обеспечивают четкое разделение задач. Вероятно, вы могли бы также просто создать простое локальное экспресс-приложение, которое просто возвращает жестко закодированный JSON, если вы не хотите использовать сторонние инструменты.