使用 `react-native-dotenv` 的全面指南

使用 react-native-dotenv 的全面指南

react-native-dotenvA Babel preset let you import application configs from .env file (zero runtime dependency)项目地址:https://gitcode.com/gh_mirrors/re/react-native-dotenv

1. 项目介绍

react-native-dotenv 是一个 Babel 预设插件，允许你在React Native项目中从.env文件安全地导入配置变量，无需运行时依赖。通过这个库，你可以轻松管理应用环境变量，如API密钥或任何其他敏感信息，而不需要在源码中硬编码这些值。

2. 项目快速启动

安装

首先，在你的React Native项目中安装react-native-dotenv：

npm install react-native-dotenv --save-dev

配置

添加预设

在你的项目根目录下创建（如果不存在）.babelrc 文件并添加以下内容：

{
  "presets": [
    "module:metro-react-native-babel-preset",
    "module:react-native-dotenv"
  ]
}

如果你还没有设置 .babelrc 文件，先安装 metro-react-native-babel-preset：

npm install metro-react-native-babel-preset --save-dev

创建.env文件

在项目根目录下创建一个名为 .env 的文件，添加你的环境变量，例如：

API_KEY=your_api_key
ANOTHER_CONFIG=your_config_value

使用变量

现在你可以在JavaScript代码中导入并使用这些环境变量：

import { API_KEY, ANOTHER_CONFIG } from 'react-native-dotenv';
// ...
ApiClient.init(API_KEY, ANOTHER_CONFIG);

生产环境配置

默认情况下，React Native会在生产环境中加载 .env.production 文件。如果你没有这个文件，可以创建它，并覆盖开发环境中的变量。

3. 应用案例和最佳实践

• 存储API密钥和访问令牌：避免将敏感数据硬编码到代码中。
• 多环境支持：除了开发和生产环境，你还可以创建多个.env文件来适应测试或特定部署环境。
• 持续集成/持续部署(CI/CD)：在构建过程中，你可以根据目标环境动态生成.env文件。

最佳实践：

• 限制对.env文件的版本控制，以防止敏感信息泄露。
• 不要在.env文件中包含不应该公开的数据，比如密码或数据库连接字符串。

4. 典型生态项目

• dotenv: 这是Node.js的一个流行库，用于读取.env文件。虽然此项目主要面向React Native，但其核心思想受到了dotenv的启发。
• metro: React Native的默认打包器，它可以很好地配合react-native-dotenv工作，无缝解析导入的环境变量。

以上就是关于react-native-dotenv的基本介绍、快速启动、最佳实践以及相关生态项目的概述。通过正确使用，它可以帮助你更好地管理和保护你的React Native应用的配置信息。

react-native-dotenvA Babel preset let you import application configs from .env file (zero runtime dependency)项目地址:https://gitcode.com/gh_mirrors/re/react-native-dotenv