简介
cienvy-client 是一个 Node.js 的 npm 包，用于将在 CI/CD 环境中设定的环境变量和 secrets（密码、API Key 等敏感信息）注入到前端应用程序中，从而便于在构建时进行个性化的前端部署。
安装
使用以下命令，在 Node.js 项目中安装 cienvy-client：
npm install --save-dev cienvy-client
用法
在前端项目根目录中，创建一个名为 .env.local 的文件，在其中定义需要注入的环境变量和 secrets，例如：
API_URL=https://api.example.com API_KEY=abcdefg123456
在前端项目的顶层 JavaScript 文件中（通常是 main.js 或 app.js），使用以下代码引入 cienvy-client 并将 .env.local 文件中的内容注入到全局环境变量中：
import cienvy from 'cienvy-client';
if (process.env.NODE_ENV === 'development') {
cienvy.load('.env.local');
}如果在生产环境中运行应用程序，可以将 .env.local 的内容注入到全局环境变量中：
import cienvy from 'cienvy-client'; cienvy.load();
这样，应用程序中的任何文件都可以通过 process.env 对象访问环境变量和 secrets 了。
示例
以下是一个例子，我们在 Vue.js 应用程序中使用 cienvy-client 注入了一个 API URL 和 API Key：
-- -------------------- ---- ------- ------ --- ---- ------ ------ ----- ---- -------- ------ ------ ---- ---------------- -- --------------------- --- -------------- - -------------------------- - ---- - -------------- - ---------------------- - -------------------- ------------------------------------- -- - ---------------------------- - ------- - - -------------------- ------ ------- --- --- ----- ------- - -- ------ ------------------
在上述的代码中，我们在 axios 的拦截器中使用了注入的 API_URL 和 API_KEY 环境变量，以确保在构建时的个性化部署。
总结
cienvy-client 是一个十分方便的 npm 包，可以帮助我们在构建前端应用程序时快速注入环境变量和 secrets，从而确保构建的个性化部署。
通过本篇文章的学习，我们了解了如何安装和使用 cienvy-client 这个 npm 包，以及如何在 Vue.js 应用程序中使用它来注入环境变量和 secrets。相信这些知识对于我们改善构建流程并进行个性化的前端部署有着重要的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590981e8991b448d66dc