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

jfgube3f  于 2023-04-22  发布在  React
关注(0)|答案(1)|浏览(127)

我觉得我做的每件事都是对的,但我一定是在哪里出错了。我没有使用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时,上面的日志不会打印出来。
然后,我在项目中使用BASE_URL在许多API请求中访问CONFIG对象。如果我在AWS上的集群上运行它,它们都可以工作。但是当我尝试以这种方式在本地运行它时,ipAddress未定义因此它无法连接到我的后端,我得到Network Request Failed错误,如果url不好,这是有意义的。我可以使用localhost在本地运行它,但我想使用ip地址,因为它在所有ios/android sim/emulators上都能一致地工作。下面是使用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;
  }
}

我尝试将变量传递给start命令。这里有一个。包含--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

在运行npm run start之前,我还尝试用另一个带有ipAddress声明位的脚本加载config.js文件,在启动文件中使用和不使用相同的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时,变量没有结转,但我不知道为什么它在第一种情况下没有结转,因为据我所知,它们都在同一个过程中。这里可能发生了什么?感谢任何人的投入!

toe95027

toe950271#

我研究了@user1934428建议的sed命令,并取得了成功!在./scripts/config文件和./scripts/start.sh文件中使用sed都有效。第一行用硬编码的ip地址替换/config/config.js中的process.env.ipAddress。第二行对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

相关问题