如何使用环境变量创建 React 包？答案

【问题标题】：How to create a React package with environment variables?如何使用环境变量创建 React 包？
【发布时间】：2022-08-15 06:21:57
【问题描述】：

我正在使用 React 创建一个 NPM 包（基本上是一个对 API 执行查询并在页面中显示响应的包）

因为我有不同的应用程序要使用这个包，所以我需要调用不同的 API url。我认为我可以使用 .env 将 API url 作为占位符 (process.env.REACT_APP_API_URL) 保留在包中，然后在使用者应用程序的 .env 文件中传递 url。然而，即使应用程序有一个 .env 文件并且 url 值在那里，API 调用是对一个 \'undefined\' url 进行的。

我的想法是，当构建包时，我的变量没有占位符，而是将占位符替换为 \'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;

这是我的 React 应用程序中的 .env 文件：

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

谢谢

标签： reactjs npm package environment-variables

【解决方案1】：

我建议公开一个需要 API URL 的方法，如下所示

    import axios from 'axios';


export const configureClient =  (configOptions) => {
  const apiClient = axios.create({
    baseURL: `${configOptions.reactAppApiUrl}/`,
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json; charset=utf-8",
    },
  });
  return apiClient;
}

这可能对您有帮助吗，还提供 configOption，为它们提供更多功能，例如在创建 axios 实例时设置要传递的额外标头

【讨论】：

【解决方案2】：

根据@Bhavesh Daswani 的建议，我做了以下事情：

应用程序.tsx

import React from "react";
import { AppContainer } from @my-package;

const apiConfig = {
  url: process.env.REACT_APP_API_URL!,
}

const App = () => {
  return (
    <AppContainer apiConfig={apiConfig}>
       
    </AppContainer>
  );
};

export default App;

然后，在 my-package npm 包中的 AppContainer.tsx 中，我有：

import React from "react";
import axios from "axios";

import {
    ApiConfig,
    AppContainerProps,
} from "./AppContainer.types";

const configureApi = (apiConfig: ApiConfig) => {
    axios.defaults.baseURL = apiConfig.url;
};

const AppContainer = (props: AppContainerProps) => {
    configureApi(props.apiConfig);

    return (
        <>
            
        </>
    );
};

export default AppContainer;

【讨论】：