什么是 envify？
envify 是一个可以将环境变量注入到前端代码中的 npm 包。通过在编译期间对代码进行转换，它可以根据当前环境变量的值动态修改代码中的常量。
如何安装 envify？
你可以使用 npm 在你的项目中安装 envify：
npm install --save-dev envify
如何使用 envify？
- 安装 envify 后，你需要将它添加到你的构建脚本中。在这个例子中，我们将使用 browserify 进行构建。
-- -------------------- ---- ------- ----- ---------- - ---------------------- ----- ------ - ------------------------- ----- - - ------------ -------- ----------- --- -------------------- --------- ------------- ---- --------------------------------展开代码
- 接下来，在你的代码中，你可以使用 process.env 对象来访问环境变量。例如，在上面的例子中，我们将 NODE_ENV 的值设置为 production。在我们的代码中，我们可以使用以下方式来访问它：
if (process.env.NODE_ENV === 'production') { console.log('生产环境'); } else { console.log('开发环境'); }
- 当你运行构建命令时，envify 将会根据你设置的环境变量值，在代码中动态替换 "process.env.NODE_ENV" 为 "production"。这样你的代码就可以根据当前环境变量的值来执行不同的逻辑。
envify 的指导意义
envify 并不是一个复杂的工具，但它的作用却非常重要。通过将环境变量注入到前端代码中，我们可以在不同的环境中轻松地进行一些配置。
例如，在开发环境中，我们可能需要打印更多的调试信息，而在生产环境中，我们则更关心性能和安全性。使用 envify 可以让我们方便地切换这些配置，而不需要手动修改代码。
示例代码
const API_URL = process.env.NODE_ENV === 'production' ? '/api' : 'http://localhost:3000'; fetch(`${API_URL}/users`) .then((response) => response.json()) .then((data) => console.log(data)) .catch((error) => console.error(error));
在上面的代码中，我们使用了 envify 来动态设置 API_URL 的值。如果当前环境为 production，则 API_URL 将会被设置为 "/api"，否则将会被设置为 "http://localhost:3000"。这样我们就可以在不同的环境中使用相同的代码来访问不同的 API 地址。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/40742
