Expo项目使用dotenv与webpack时process.env自定义环境变量返回undefined

1. 先修复.env文件格式错误 #

你当前的.env文件存在两处格式问题，会导致变量识别异常：

• 重复定义了同一个REACT_APP_KEY变量，后定义的会覆盖前面的定义
• 变量赋值的等号两边加了空格，dotenv会将空格识别为变量名/值的一部分，甚至识别失败
  修改后正确的.env内容为：

REACT_APP_KEY=aaddddawrfffvvvvssaa

同时确认.env文件放在项目根目录，与package.json同级，不要放在src等子目录中。

2. 解决process.env读不到自定义变量的问题 #

你当前使用的react-native-dotenv Babel插件默认只会把环境变量注入到配置的@env模块中，不会挂载到process.env下。process.env.NODE_ENV是Webpack默认注入的内置变量，所以可以正常读取，自定义变量没有对应配置就会返回undefined，可根据需求选择以下两种方案：

方案A：调整Babel配置，支持process.env读取 #

修改babel.config.js中react-native-dotenv的配置，新增envName字段指定挂载到process.env：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-reanimated/plugin',
      ['module:react-native-dotenv', {
        'moduleName': '@env',
        'path': '.env',
        "blocklist": null,
        "allowlist": null,
        "safe": true,
        "allowUndefined": false,
        "envName": "process.env" // 新增这行配置
      }]
    ],
  };
};

修改后启动项目时添加清空缓存的参数，避免Babel缓存旧配置导致不生效：

npx expo start --clear

方案B：继续使用@env导入，修复之前的缓存问题 #

如果不想调整读取方式，只需要解决之前的@env缓存问题即可：

• 每次修改.env文件或Babel配置后，都用npx expo start --clear命令启动项目，清空Babel缓存
• 修复Typescript类型声明，把变量名和.env里的定义对应上，避免类型报错：

declare module '@env' {
  export const REACT_APP_KEY: string;
}

3. 可选：Webpack层面注入环境变量 #

如果不想依赖react-native-dotenv插件，也可以直接在Webpack配置中注入环境变量：
首先安装dotenv依赖（如果未安装），然后修改webpack.config.js：

require('dotenv').config()
const webpack = require('webpack')
const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // 原有配置保持不变...
  
  // 新增DefinePlugin注入自定义环境变量
  config.plugins.push(
    new webpack.DefinePlugin({
      'process.env.REACT_APP_KEY': JSON.stringify(process.env.REACT_APP_KEY)
    })
  )

  return config;
};

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