babel.config.js 中的环境变量

Question

我们需要根据环境（local/dev/staging/production）修改我们的 React Native 应用程序（使用 Expo 构建）中的某些配置/变量。我已经查看了许多为此目的而设计的库，但似乎都有一个缺陷，不适合我们的用例：

• dotenv（中断是因为它试图在运行时访问“fs”，当它不再可用时，因为它不是纯 JS 包并且不能被 Expo 捆绑）
• react-native-config（不能与 Expo 一起使用，因为它需要原生代码作为插件的一部分）
• react-native-dotenv（有点工作，但在内部缓存配置并忽略任何 .env 更改，直到修改导入变量的文件）

作为不需要第三方插件的更简洁的替代方案，我正在考虑使用 babel 的 env 选项，并将所有环境作为单独的 json 对象列出在 babel.config.js 中。但是，我没有看到太多关于此的文档或示例。我是否只需在与presets 和plugins 包含production、development 等字段的同一级别添加env 字段，如下例所示：

module.exports = (api) => {
    api.cache(true);
    return {
        presets: [...],
        env: {
            development: {
                CONFIG_VAR: 'foo'
            },
            production: {
                CONFIG_VAR: 'bar'
            }
        }
    }
}

这行得通吗？我如何在代码后面访问这个CONFIG_VAR？

Answer 1

我在我的 Expo 项目中尝试设置环境变量时遇到了同样的问题。我为此使用了babel-plugin-inline-dotenv。

1. 安装插件

    npm install babel-plugin-inline-dotenv
   

2. 在 babel.config.js 文件中包含插件和 .env 文件的路径

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    env: {
      production: {
        plugins: [["inline-dotenv",{
          path: '.env.production'
        }]]
      },
      development: {
        plugins: [["inline-dotenv",{
          path: '.env.development'
        }]]
      }
    }
  };
};

1. 在您的 .env.production 或 .env.development 文件中添加如下环境变量：

    API_KEY='<YOUR_API_KEY>'
   

2. 稍后在您的代码中，您可以像这样访问上述变量：

    process.env.API_KEY
   

要访问您的环境变量在 babel.config.js 文件中，请像这样使用dotenv package：

   require('dotenv').config({ path: './.env.development' })
   console.log('API_KEY: ' + process.env.API_KEY)

   module.exports = function() {
   // ...
   }