react使用.env文件管理全局变量的方法

React是一个非常流行的JavaScript库，它可以帮助开发者快速构建高度动态的用户界面。React的一个重要特点是能够轻松地和其他库和工具集成，这使得开发者可以更方便地编写和管理代码。其中，使用.env文件管理全局变量是react中很常用的一个方法。

1. 建立.env文件

在你的React项目根目录下，创建一个名为.env的文件。这个文件包含了你需要设置的环境变量，这些变量会在你的React应用程序中全局有效。

2. 设定环境变量

在.env文件中设定你所需要的环境变量，设置方式为KEY=VALUE。比如：

REACT_APP_API_KEY=12345
REACT_APP_API_BASE_URL=https://api.example.com

在上述代码中，我们定义的环境变量名为REACT_APP_API_KEY和REACT_APP_API_BASE_URL，分别表示API密钥和API基础URL。注意：在React应用中只有以REACT_APP_为前缀的变量才能被识别。

3. 使用环境变量

在React应用程序中，你可以通过process.env.REACT_APP_的方式来使用我们在 .env 中设置的环境变量。比如：

function App() {
  const apiKey = process.env.REACT_APP_API_KEY;
  const apiUrl = process.env.REACT_APP_API_BASE_URL;

  return (
    <div>
      <h1>My App</h1>
      <p>API Key: {apiKey}</p>
      <p>API URL: {apiUrl}</p>
    </div>
  );
}

在上述代码中，我们分别使用了环境变量REACT_APP_API_KEY和REACT_APP_API_BASE_URL，并把它们显示在了页面上。当然，在使用之前，还要确保.env文件已经被加载。一般情况下，在你启动React开发服务器时，会自动加载.env文件中的环境变量。

4. 示例说明1

比如在实际项目中，我们常常会使用到第三方模块。有时候需要在全局配置下某一模块，比如Antd，同时还需要定制一些默认配置。这时，可以使用.env文件进行管理。

// .env
REACT_APP_Antd_THEME=dark

// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
import "antd/dist/antd.dark.css";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

// App.js
import React from "react";
import { Button } from "antd";
import "./App.css";

function App() {
  const antdTheme = process.env.REACT_APP_Antd_THEME;

  return (
    <div className="App">
      <Button type="primary">Hello Antd Theme: {antdTheme}</Button>
    </div>
  );
}

export default App;

在此示例中，我们在.env文件中设定了变量REACT_APP_Antd_THEME，并将其值设置为dark。在index.js中，我们导入了Antd库，并使用antd.dark.css主题进行全局配置。最后，在App.js中，我们通过process.env.REACT_APP_的方式获得了Antd主题变量，将其作为按钮组件的文本显示出来。

5. 示例说明2

在项目开发中，我们经常用到API访问地址。网站很可能会有不同的环境，例如开发、测试和生产环境。使用.env文件管理全局变量可以在不同的环境中灵活切换，而不用修改任何代码。

// .env.development
REACT_APP_API_BASE_URL=https://dev-api.example.com

// .env.test
REACT_APP_API_BASE_URL=https://test-api.example.com

// .env.production
REACT_APP_API_BASE_URL=https://api.example.com

// api.js
const baseUrl = process.env.REACT_APP_API_BASE_URL;

export function getPosts() {
  return fetch(`${baseUrl}/posts`);
}

在上述示例中，我们在不同的.env文件中定义了不同的环境变量REACT_APP_API_BASE_URL。每一个环境使用自己的访问地址。在api.js中，我们导入环境变量，使用模板字面量构建API地址，并返回fetch()结果。

使用.env文件管理全局变量是React中非常方便的一种方式，尤其是项目需要部署到不同的环境中时。在本文中，我介绍了如何使用.env文件管理全局变量，并且通过两个示例向你展示了如何实际应用它。