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選項，並將所有環境列為babel.config.js單獨的 json 對象。 但是，我沒有看到太多關於此的文檔或示例。 我是否只添加與包含production 、 development等字段的presets和plugins相同級別的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. 包括插件和路徑.ENV文件在您babel.config.js文件

 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' }]] } } }; };

3. 在您的 .env.production 或 .env.development 文件中，添加如下環境變量：

    API_KEY='<YOUR_API_KEY>'

4. 稍后在您的代碼中，您可以像這樣訪問上述變量：

    process.env.API_KEY

到內訪問您的ENV變量babel.config.js文件，使用dotenv包是這樣的：

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

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