如何有条件地导出 (CRA) React 应用程序中的值

问题描述

在我的 React (v17) 应用程序中，我希望根据是否定义了 process.env.REACT_APP_API_BASE 以不同方式呈现 API 处理程序。

所以效果像

if (process.env.REACT_APP_API_BASE) {
  // use the actual API handler
  export { login,loginSilent,logout } from './api'
} else {
  // use the inline fake API handler
  export { login,logout } from './fake'
}

但是尝试我得到错误 Parsing error: 'import' and 'export' may only appear at the top level。

有没有一种标准方法可以像这样有选择地使用一个或另一个文件？

澄清

我正在寻找一种让 Webpack 或 Babel 有条件地呈现一个或另一个导出的方法，而不是将两个选项都保留在代码中。

进一步说明

我尝试过使用各种 babel 插件和 webpack 覆盖（使用 custom-cra 等），但没有一个效果非常好，而且似乎引入了更多问题。

解决方法

尝试拆分逻辑以确保导出出现在顶层。

import {
  login as loginMock,loginSilent as loginSilentMock,logout as logoutMock,} from "./fake";
import {
  login as loginApi,loginSilent as loginSilentApi,logout as logoutApi,} from "./api";
const [login,loginSilent,logout] = process.env.REACT_APP_API_BASE
  ? [loginMock,loginSilentMock,logoutMock]
  : [loginApi,loginSilentApi,logoutApi];
export { login,logout };