Question

我们需要根据环境（本地/开发/登台/生产）在React Native应用程序（使用Expo构建）中修改某些配置/变量。我已经看过许多用于此目的的库，但似乎所有这些库都存在我们的用例无法克服的缺陷：

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

作为不需要第三方插件的更清洁的替代方法，我正在考虑使用babel的env选项，并将所有环境作为$('#fileUpload').fileupload({ url: webservice + "UploadFile", dataType: 'json', multipart: true, maxChunkSize: 1048576, autoUpload: false, formData: [{ name: 'a', value: 1 }, { name: 'b', value: 2 }], acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, disableImageResize: true, previewMaxWidth: 465, previewMaxHeight: 465, previewCrop: false });中的单独json对象列出。但是，我没有看到太多的文档或示例。我是否只需将babel.config.js字段添加到与env和presets相同的级别，其中包含plugins，production等字段，如下例所示：

development

那行得通吗？以后如何在代码中访问此module.exports = (api) => { api.cache(true); return { presets: [...], env: { development: { CONFIG_VAR: 'foo' }, production: { CONFIG_VAR: 'bar' } } } }？

Answer 1

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

安装插件
```
npm install babel-plugin-inline-dotenv
```
在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'
        }]]
      }
    }
  };
};

在.env.production或.env.development文件中添加如下环境变量：
```
API_KEY='funu9efn20cijw2cin120'
```
稍后在您的代码中，您可以像这样访问上述变量：
```
process.env.API_KEY
```

babel.config.js中的环境变量

1 个答案: