在yarn start时设置环境变量

原创

mob64ca12ed7b35 2024-09-18 07:00:51 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12ed7b35的原创作品，请联系作者获取转载授权，否则将追究法律责任

在yarn start时设置环境变量

在现代的前端开发中，环境变量的设置对于构建和部署应用程序至关重要。通过不同的环境变量，开发者可以区分开发、测试和生产环境，以及调整应用程序在不同环境中的行为。本文将介绍在使用yarn start命令时如何设置环境变量，并提供相关的代码示例。

什么是环境变量？

环境变量是一些可用于操作系统和应用程序设置的动态值。它们通常用于存储配置信息，例如数据库连接字符串、API密钥以及应用的运行模式（开发、测试或生产）。通过环境变量，开发者可以轻松管理和修改应用的配置，而无需直接更改代码。

在yarn start时设置环境变量

在使用yarn start命令启动应用时，我们可以通过多种方式来设置环境变量。以下是几个常见的方法。

1. 在命令行中设置环境变量

在类Unix系统中，可以直接在命令行中设置环境变量并启动应用：

ENV_VAR_NAME=value yarn start

例如，如果我们想设置NODE_ENV变量为development，可以运行以下命令：

NODE_ENV=development yarn start

2. 在package.json中设置环境变量

如果我们希望将环境变量的设置与项目一起管理，可以在package.json文件中进行配置。我们可以在scripts部分添加环境变量：

{
  "scripts": {
    "start": "NODE_ENV=development react-scripts start"
  }
}

在这种情况下，每当我们运行yarn start时，NODE_ENV都将被设置为development。

3. 使用`.env`文件

使用.env文件可以方便地管理多个环境变量。首先，在项目根目录创建一个名为.env的文件，并在其中定义环境变量，例如：

REACT_APP_API_URL=
NODE_ENV=production

然后，在代码中可以通过process.env.REACT_APP_API_URL访问这些变量。

示例代码

以下是一个简单的React组件，展示如何使用环境变量：

import React from 'react';

const App = () => {
  return (
    <div>
      Welcome to My Application
      <p>API URL: {process.env.REACT_APP_API_URL}</p>
      <p>Current Environment: {process.env.NODE_ENV}</p>
    </div>
  );
};

export default App;

当你在具有REACT_APP_API_URL变量的环境中运行这个应用时，它会显示相应的API地址和当前运行的环境。

计划与实施

环境变量的配置不仅需要编写代码，还需要适当的计划。以下是一个简易的项目管理甘特图，展示了设置环境变量的整个过程。

gantt
    title 环境变量配置甘特图
    dateFormat  YYYY-MM-DD
    section 环境变量方案设计
    分析需求           :a1, 2023-10-01, 5d
    制定方案           :a2, after a1  , 4d
    section 环境变量实现
    设置.env文件      :b1, 2023-10-10 , 3d
    测试与验证        :b2, after b1  , 2d