在前端开发中,我们常常需要使用环境变量来区分不同的开发、测试和生产环境,以及处理一些需要保密的敏感信息。而 env-builder-github
则是一个可以帮助我们在 Github Action 中自动构建环境变量的 npm 包,下面我们将详细介绍它的使用方法。
安装
在使用 env-builder-github
之前,我们需要先在项目根目录下通过 npm 安装它:
--- ------- ------------------ ----------
使用方法
使用 env-builder-github
的流程非常简单,总结起来只有两个步骤:
- 在 Github Action 的
.yml
文件中配置env-builder-github
- 在项目代码中使用
process.env
获取环境变量
配置 env-builder-github
我们需要在 Github Action 的 .yml
文件中添加一个 env-builder-github
的步骤,来自动生成环境变量:
------ - ----- ------------------ ----- --------------------- ----- ------------- ---- - ----- ------- ------------ ---- --- -- - ----- ----- ---- --- --- ----- - ----- -------- ----------- --------- ----- ------------------------------------- ----- ------------------ -------- - ------ --------------- --------- - ------ ------------------- --------- - ------ ------- ------------ - ------ ---- ------------- --- -------------------- --
上述步骤中,我们使用了 jakejarrett/env-builder-github
的版本号为 v2.2.2
(也可以使用最新版),并通过 with
参数指定了不同环境的分支名称和环境变量前缀。
需要注意的是,为了使用 env-builder-github
,我们需要提前设置 GITHUB_TOKEN
的环境变量,方式如下:
- 登陆 Github 账号并打开相应仓库的 Settings 页面
- 打开 Secrets 页面,并点击 Add a new secret 按钮
- 输入
GITHUB_TOKEN
和对应的 Token 内容,保存即可
获取环境变量
经过上述配置后,我们的环境变量已经自动构建完成,我们现在只需要在代码中使用 process.env
即可获取到它们:
----- ------ - ----------------------------- ----- ------ - -----------------------------
我们可以将上述代码理解成“获取以 REACT_APP_
为前缀的环境变量 API_URL
和 API_KEY
”。
需要注意的是,由于我们在环境变量中存储的可能是一些敏感信息(比如私钥、密码等),因此需要注意保密。
总结
通过使用 env-builder-github
,我们可以自动构建前端项目所需的环境变量,并在代码中方便地使用它们。这不仅简化了环境变量管理的流程,也提高了开发效率,并提供了更好的保密性。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066e21a563576b7b1ece41