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 地址前缀。程序默认以 192172开头的 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/05/20