3.2.4环境变量

环境变量

环境变量使用策略

在开发环节中，灵活的环境变量让程序在不同的环境中，自动执行预期的效果。在仓库的根目录下，有一个.env文件，这个文件就是定义环境变量的地方。

在.env文件中，每一行都是一个环境变量的定义，格式为环境变量名=值，例如：

REACT_APP_INIT_CONFIG=default

在 .env 文件中，其中的配置表示程序的默认环境变量。如果你想要修改，请不要直接修改.env文件，而是在.env.local文件中修改（如果没有可以复制一份），这样可以避免你的修改被提交到代码仓库中。

使用 # 号注释掉某一行，可以快速禁用某个环境变量。

优先使用 .env.local

.env.local 文件中的配置优先级高于 .env 文件中的配置，所以你可以在 .env.local 文件中修改默认的环境变量。且 env.local 文件被 .gitignore 忽略，所以你可以随意修改，不用担心被提交到代码仓库中。

环境变量列表

以下是本程序中使用到的环境变量：

REACT_APP_INIT_CONFIG

默认值：default

说明：核心配置名称，这配置决定了程序员运行的时候，使用什么 host 和 token。其值是 /.config 目录下的配置文件名称，例如：default 表示使用 /.config/default.ts 文件中的配置。

OUT_PUT_ROOT_NAME

默认值：vpah5

说明：输出根目录名称，这个配置会影响最终解压路径，和原生相关。一般开发者可以忽略。

CARD_BUILD_DEBUG

默认值：false

说明：是否开启构建卡片的 DEBUG。如果开启，会在构建卡片的时候，在 /${process.env.OUTPUT_DIST} 目录下生成一个 debug 目录，这个文件中包含了构建卡片构建过程的中间代码，方便开发者调试。

REMOTE_IP_PREFIX

默认值：''

说明：远程 IP 地址前缀。程序默认以 192和172开头的 IP 地址为远程 IP 地址，如果你的远程 IP 地址不是以这两个开头的，但的确是同一个局域网，满足远程调试的条件，那么你可以通过这个配置来指定远程 IP 地址的前缀。

BUILD_CARD

默认值：无

说明：构建卡片的路径。当组件卡片开发完成以后，可以通过 npm run buildCard{:bash} 来构建卡片，该值来指定构建卡片的路径，例如：BUILD_CARD=Hello{:yaml}。

其路径是相对于 /src/@remote{:bash} 的，例如：BUILD_CARD=Hello{:bash} 表示构建 /src/@remote/Hello{:bash} 目录下的卡片。

注意，环境变量 BUILD_CARD 支持多个组件路径，使用逗号分隔，例如：BUILD_CARD=Hello,World{:bash}。这对于需要同时构建多个卡片的场景下，有很大的帮助。

目录寻址规则符合 esbuild 入口加载规则即可， 例如：BUILD_CARD=Hello{:bash} 可以表示构建

/src/@remote/Hello/index.tsx{:bash} 或者 /src/@remote/Hello.tsx{:bash}

也可以表示其他非 tsx 文件，例如：

/src/@remote/Hello/index.js{:bash}

如果不想使用 BUILD_CARD 来指定构建卡片的路径，也可以使用脚本方式指定，详细可以参考 常用脚本 章节的buildCard。

OUTPUT_DIST

默认值：dist

说明：构建卡片和 VPA 底包的输出目录。 该值是相对于项目根目录的，例如：OUTPUT_DIST=dist 表示构建输出到 /dist 目录下。

其他说明

因为本程序是基于 create-react-app 创建的，所以也支持 create-react-app 所支持的环境变量。 例如：

  • ROOT
  • PUBLIC_URL 等。

如果你想要了解更多，

可以参考： create-react-app 的 Advanced Configuration 文档。

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24