如何将环境变量从脚本传递到 React Native 文件？

Question

我觉得我做的一切都是对的，但我一定是在某个地方出错了。我没有使用 Expo 或 create-react-app。我在 Macbook 上。

首先，我运行

npm run start

，它运行一个脚本。脚本看起来像这样：

#!/usr/bin/env bash
ipAddress=$(ipconfig getifaddr en0)
echo "IP Address in config: $ipAddress"
export ipAddress

case "$1" in
    "emulator"|"e")
        sh ./scripts/emulator.sh && node node_modules/react-native/local-cli/cli.js start ;;
    *)
        node node_modules/react-native/local-cli/cli.js start ;;
esac

要注意的重要部分是

ipAddress

。在这里，echo 打印出正确的地址。

我最终希望在如下所示的配置文件中使用该变量：

const ipAddress = process.env.ipAddress;
console.log("IP Address in config:", ipAddress);

const CONFIG = {
    ENV: 'debug',
    BASE_URL: `http://${ipAddress}:8080`,
    BUCKET: 'companymedia',
    STRIPE_KEY: 'placeholder_key',
    ITERABLE_PUSH_PLATFORM: 'SANDBOX',
    ITERABLE_PUSH_PLATFORM_ANDROID: 'AXA',
    ITERABLE_PUSH_APPLICATION_NAME_ANDROID: 'com.company',
    ITERABLE_PUSH_APPLICATION_NAME: 'com.company.Company.00009',
  };
  
  console.log("BASE_URL:", CONFIG.BASE_URL)
  module.exports = CONFIG;

当我运行

npm run start

时，上面的日志没有打印出来。

然后我在项目的后面使用

CONFIG

在很多api请求中访问

BASE_URL

对象。如果我在 AWS 上的集群上运行它，它们都可以正常工作。但是当我尝试以这种方式在本地运行它时，

ipAddress

是未定义的 所以它无法连接到我的后端并且我得到一个

Network Request Failed

错误，如果 url 是错误的，这是有道理的。我可以使用

localhost

在本地运行它，但我想使用 ip 地址，因为它在所有 ios/android sim/模拟器上都能一致地工作。这是使用

CONFIG

对象的函数之一的示例：

export async function login(payload: Types.LoginCredentials): Promise<Types.Token | false | Types.ErrorStatus> {
  console.log("url:", CONFIG.BASE_URL)
  try {
    const res = await fetch(
      `${CONFIG.BASE_URL}/tokens/user/`,
      {
        method: 'POST',
        headers: getHeaders(null),
        body: JSON.stringify(payload),
      },
    );

    if (res.status !== 200) return res.status as Types.ErrorStatus;

    return JSON.parse(await res.text()) as Types.Token;
  } catch (error) {
    console.log("error",)
    return false;
  }
}

我尝试将变量传递给启动命令。这是一个。包括

--env

结果是

error: unknown option '--env'

，所以我把它漏掉了。我还一次删除了

export ipAddress

：

#!/usr/bin/env bash
ipAddress=$(ipconfig getifaddr en0)
echo "IP Address in config: $ipAddress"
export ipAddress

case "$1" in
    "emulator"|"e")
        sh ./scripts/emulator.sh && node node_modules/react-native/local-cli/cli.js start ipAddress="$ipAddress" ;;
    *)
        node node_modules/react-native/local-cli/cli.js start ipAddress="$ipAddress" ;;
esac

我还尝试像这样将

node ./config/config.js

添加到文件中，以确保文件运行并设置变量。当我这样做时，

./config/config.js

中的日志确实打印出来了，带有正确的 ip 地址。也许使用

node

创建了一个新进程，所以这就是变量不持久的原因？：

#!/usr/bin/env bash
ipAddress=$(ipconfig getifaddr en0)
echo "IP Address in config: $ipAddress"
export ipAddress

node ./config/config.js

case "$1" in
    "emulator"|"e")
        sh ./scripts/emulator.sh && node node_modules/react-native/local-cli/cli.js start ;;
    *)
        node node_modules/react-native/local-cli/cli.js start ;;
esac

我还尝试在运行

config.js

之前用另一个带有

ipAddress

声明位的脚本加载

npm run start

文件，在启动文件中有和没有相同的

ipAddress

声明。该命令是

npm run config local

，脚本如下所示。在这种情况下也正确打印了所有日志：

#!/usr/bin/env bash

error=""

case "$1" in
    "debug"|"d")
        cp ./config/debug/config.js ./config/
        ;;
    "release"|"r")
        cp ./config/release/config.js ./config/
        ;;
    "local"|"l")
        ipAddress=$(ipconfig getifaddr en0)
        export ipAddress   
        cp ./config/local/config.js ./config/
        node ./config/config.js
        ;;
    *)
        error="unrecognized environment: $1"
        printf "%s\n" "$error" >&2
        ;;
esac

我认为最后一种方法没有用，因为当我运行 npm run start 时变量没有保留，但我不明白为什么它在第一种情况下没有保留，因为它们都在同一个过程中据我所知。这里会发生什么？感谢任何人对此的投入！

Answer 1

我调查了@user1934428建议的

sed

命令并成功了！使用

sed

在

./scripts/config

文件和

./scripts/start.sh

文件中都有效。第一行将

process.env.ipAddress

中的

/config/config.js

替换为硬编码的 ip 地址。第二行对

BASE_URL

做了类似的事情，第三行删除了

const ipAddress=...

和它下面的行，因此每次加载文件/美容原因时都不会创建新变量，第四行只是指示要加载哪个文件执行这些东西。感谢大家的帮助！我学到了很多，希望这对别人有帮助！

#!/usr/bin/env bash

error=""

case "$1" in
    "debug"|"d")
        cp ./config/debug/config.js ./config/
        ;;
    "release"|"r")
        cp ./config/release/config.js ./config/
        ;;
    "local"|"l")
        cp ./config/local/config.js ./config/

        ipAddress=$(ipconfig getifaddr en0)
        echo "IP Address: $ipAddress"

        sed -i '' -e "s|const ipAddress = process.env.ipAddress;|const ipAddress = '$ipAddress';|" \
                  -e "s|BASE_URL:.*|BASE_URL: 'http://${ipAddress}:8080',|" \
                  -e '/const ipAddress =/,+1d' \
                  ./config/config.js
        ;;
    *)
        error="unrecognized environment: $1"
        printf "%s\n" "$error" >&2
        ;;
esac