React Native - 捆绑 iOS 应用程序时，.ENV 在 Metro Bundler 的配置文件中未定义

Question

我有 NPM 脚本来构建和运行我们的应用程序具有模拟后端数据（用于组件测试）。他们使用 cross-env npm 包内联设置 ENV。

"android-mock": "cross-env MOCK_BACKEND=1 NODE_ENV=development node generate-config.js && react-native run-android -- --reset-cache", - 模拟器运行s on Windows

"ios-mock": "cross-env MOCK_BACKEND=1 NODE_ENV=development node generate-config.js && react-native run-ios -- --reset-cache", - MacOS 上的模拟器运行s

Metro bundler 查找 MOCK_BACKEND env 并基于此解析路径，以便应用使用模拟数据而不是依赖后端来获取它。

问题：Metro 只能在捆绑 Android 应用程序时读取 process.env.MOCK_BACKEND 值，在 iOS 上，值 returns 未定义。

定义 ENV 的正确方法是什么，以便 Metro 也可以正确读取它们以进行 iOS 捆绑？

Answer 1

我不知道为什么，但似乎 Metro 在捆绑 iOS 应用程序时覆盖了设置的 ENV。在其他地方定义了 ENV。

如果有人遇到这个问题，我就是这样解决的。

解决方案

1。在上面 NPM 脚本中的 generate-config.js 脚本中，我添加了 NODE_ENV 检查。该脚本根据 NODE_ENV.

在 public 文件夹中生成 config.js

const fs = require("fs");
console.log( process.env.NODE_ENV);

if(process.env.NODE_ENV === 'production'){
  fs.copyFile("config.runtime.js","public/config.js",(err) => {if(!err){console.log(err)}});
} else if (process.env.NODE_ENV === 'mock'){
  fs.copyFile("config.mock.js","public/config.js",(err) => {if(!err){console.log(err)}});
} else {
  fs.copyFile("config.debug.js","public/config.js",(err) =>{if(!err){console.log(err)}});
}

2。我已将生成的 config.js 导入 Metro.config 并根据需要使用它。

const config = require(path.resolve(__dirname, 'public/config.js'));

config.js供参考：

module.exports = {
    isProduction : false,
    disableCache: true,
    API:"http://alanj.bs.local:15455/",
    /////////////////////////////////////
    // ENVs
    /////////////////////////////////////
    MOCKED_BACKEND: 1,
    /////////////////////////////////////
}

React Native - 捆绑 iOS 应用程序时，.ENV 在 Metro Bundler 的配置文件中未定义

React Native - .ENVs are undefined in Metro Bundler's config file when bundling iOS apps

environment-variables

ios

reactjs

react-native

metro-bundler

解决方案