如何为React NPM包配置环境变量实现多API地址调用？

我正在开发一个基于React的NPM包，该包主要用于调用API接口并在页面展示返回结果。由于有多个不同的应用会使用这个包，需要适配不同的API地址。我原本计划在包中使用process.env.REACT_APP_API_URL作为占位符，通过消费应用的.env文件传入具体的API地址，但实际调用时发现API地址为undefined。

我猜测问题出在包构建阶段，占位符被替换成了undefined，这说明当前方案不可行。请问有没有合适的解决方案？

包中代码： #

import axios from 'axios';

const apiClient = axios.create({
    baseURL: `${process.env.REACT_APP_API_URL}/`,
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json; charset=utf-8",
    },
  });

export default apiClient;

消费应用的.env文件内容： #

REACT_APP_API_URL="http://localhost:5001/"

解决方案 #

1. 提供初始化函数让消费应用传入API地址 #

NPM包构建时会把process.env变量替换成包构建环境的值，无法直接读取消费应用的环境变量。可以让消费应用在启动时主动传入API地址：

// 包内的apiClient.js
import axios from 'axios';

let apiClientInstance;

export function initApiClient(apiUrl) {
  apiClientInstance = axios.create({
    baseURL: `${apiUrl}/`,
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json; charset=utf-8",
    },
  });
}

export function getApiClient() {
  if (!apiClientInstance) {
    throw new Error('请先调用initApiClient初始化API客户端');
  }
  return apiClientInstance;
}

消费应用在入口文件（如index.js）中初始化：

// 消费应用的index.js
import { initApiClient } from '你的NPM包名称';

initApiClient(process.env.REACT_APP_API_URL);

之后在包的组件或模块中，通过getApiClient()获取配置好的实例：

import { getApiClient } from './apiClient';

async function fetchData() {
  const response = await getApiClient().get('/user/list');
  // 处理返回数据
}

2. 用React Context传递配置 #

如果包以React组件为主，可以通过Context让消费应用传递API地址，包内组件动态获取：

// 包内的ApiContext.js
import { createContext, useContext } from 'react';

const ApiContext = createContext();

export function ApiProvider({ apiUrl, children }) {
  return (
    <ApiContext.Provider value={{ apiUrl }}>
      {children}
    </ApiContext.Provider>
  );
}

export function useApi() {
  const context = useContext(ApiContext);
  if (!context) {
    throw new Error('useApi必须在ApiProvider组件内部使用');
  }
  return context;
}

修改API客户端，让它在组件内动态创建：

// 包内的apiClient.js
import axios from 'axios';
import { useApi } from './ApiContext';

export function useApiClient() {
  const { apiUrl } = useApi();
  return axios.create({
    baseURL: `${apiUrl}/`,
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json; charset=utf-8",
    },
  });
}

消费应用在根组件中包裹ApiProvider：

// 消费应用的App.js
import { ApiProvider } from '你的NPM包名称';

function App() {
  return (
    <ApiProvider apiUrl={process.env.REACT_APP_API_URL}>
      {/* 应用内的其他组件 */}
    </ApiProvider>
  );
}

3. 允许消费应用直接修改默认配置 #

导出默认的axios实例，让消费应用自行修改baseURL：

// 包内的apiClient.js
import axios from 'axios';

const apiClient = axios.create({
    baseURL: '/', // 设置默认路径，后续可被覆盖
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json; charset=utf-8",
    },
  });

export default apiClient;

消费应用在入口文件中修改配置：

// 消费应用的index.js
import apiClient from '你的NPM包名称';

apiClient.defaults.baseURL = `${process.env.REACT_APP_API_URL}/`;

内容的提问来源于stack exchange，提问作者Nahuel