更好的管理前端环境变量方法
本文主要分析使用环境变量管理前端项目时会遇到的问题，并介绍常用工具给出解决方案。
如何使用环境变量
在搭建基于 webpack 前端项目时（或任意基于 Node 的项目，本文以 webpack 项目为例），一般需要提供两种运行模式：开发模式和生产模式。通常的做法是，执行命令前设置环境变量 <span style="font-size: 14px;">NODE_ENV</span> 为 <span style="font-size: 14px;">production</span>，如执行 <span style="font-size: 14px;">NODE_ENV=production webpack</span> 命令，然后在 JavaScript 代码中通过 <span style="font-size: 14px;">process.env.NODE_ENV === 'production'</span> 来判断是生产模式，否则为开发模式。通过区分不同的模式可以执行不同的操作，比如在开发模式下启动开发服务器并代理转发 API，或在生产模式下压缩合并代码等。为了更好的统一前端工程命令，可以将启动开发模式和生产模式的命令分别加入 package.json 文件的 scripts 字段中，以后只需要执行 <span style="font-size: 14px;">npm start</span> 或 <span style="font-size: 14px;">npm run build</span> 即可。通过定义环境变量的方式很好的解决了在项目中执行差异操作的需求。如果希望支持成员自定义环境变量，只要在程序中优先使用环境变量中的值即可。比如已经设置端口号优先使用环境变量中的 <span style="font-size: 14px;">PORT</span> 的值，项目成员开发时执行 <span style="font-size: 14px;">PORT=8080 npm start</span> 命令就可以自定义端口号为 8080 了。
使用环境变量时遇到的问题
上述的解决方案可以适用大部分场景，但却无法解决设置环境变量的跨平台和持久化问题
跨平台
如果项目中有使用 Windows 操作系统的成员，在执行 <span style="font-size: 14px;">npm run build</span> （即 <span style="font-size: 14px;">NODE_ENV=production webpack</span>）时会失败，原因是 Windows 命令不支持使用这种方式设置环境变量。虽然在 Windows 下也可以根据 build 脚本内容，手动执行 <span style="font-size: 14px;">set NODE_ENV=production webpack</span>，却破坏了统一前端工程命令的初衷，为此需要引入一个解决跨平台设置环境变量的库。如使用 cross-env，只要改写 package.json 中的 build 脚本为 <span style="font-size: 14px;">cross-env NODE_ENV=production webpack</span> 就可以跨平台工作了。
持久化
随着规模的增大，项目自定义环境变量的数量可能越来越多。比如部署后静态资源需要使用 CDN，项目生产模式就需要提供一个环境变量用于支持自定义 webpack 的 publicPath 字段；又比如有的成员并没有把 API 服务器运行在本机，而是运行在虚拟机里或另一台电脑上，项目开发模式就需要提供两个环境变量用于支持自定义 API 服务器地址和端口号……可能有的成员每次开发时必须执行类似这么长的命令：<span style="font-size: 14px;">PORT=8080 API_SERVER=192.168.100.100 API_PORT=9000 npm start</span>，因此需要一个可以持久化环境变量的工具，比如使用 dotenv 或 env-cmd 。以 env-cmd 为例，只需创建一个 .env.local 文件（不计入版本管理），写入：
<span style="font-size: 14px;">NODE_ENV=development<br>PORT=8080<br>API_SERVER=192.168.100.100<br>API_PORT=9000<br></span>
改写 package.json 中 start 命令（build 命令类似）为 <span style="font-size: 14px;">env-cmd --fallback ./.env.local webpack</span> 即可解决自定义环境变量过多每次手动输入繁琐的问题。
真正好用的环境变量管理工具
管理环境变量有很多工具，下面简单分析一下常用工具 dotenv、cross-env 和 env-cmd 的优势与不足：
dotenv 可以解决跨平台和持久化的问题，但使用场景有限，只适用 node 项目，且和项目代码强耦合，需要在 node 代码运行后手动执行触发
cross-env 支持在命令行自定义环境变量。问题也非常明显，不能解决大型项目中自定义环境变量的持久化问题
env-cmd 也可以解决跨平台和持久化的问题，支持定义默认环境变量，不足的是不支持在命令行中自定义环境变量
事实上 NPM 本身也提供了类似设置项目环境变量的功能。以上述自定义端口号的需求为例，也可以在项目目录下执行 <span style="font-size: 14px;">npm config set project-name:PORT 8080</span>（project-name 为项目名称），执行 <span style="font-size: 14px;">npm start</span> 后在代码中可以通过 <span style="font-size: 14px;">process.env.npm_package_config_PORT</span> 获取到 8080。而且还可以将 package.json 中 config 字段设置为 <span style="font-size: 14px;">{"PORT": 8000}</span>，用于指定 <span style="font-size: 14px;">npm_package_config_PORT</span> 的默认值。使用 NPM 的 config 功能管理环境变量的最大优势是原生支持，放在 package.json config 字段中的默认环境变量也非常方便查看。遗憾是的，变量名前面都会有冗长的 <span style="font-size: 14px;">npm_package_config_</span>；脚本必须从 package.json 的 scripts 字段中执行（即执行 npm run your_script_name）；还有就是所有项目共用一份配置文件（.npmrc，默认在用户目录下），不方便手动编辑和查看。
因此一个好用的前端环境变量管理工具应该具备以下功能：
支持命令行设置环境变量
跨平台
持久化，最好能够提供一个设置本地环境变量的命令行工具
支持设置默认环境变量
支持获取 NPM 提供的环境变量（
<span style="font-size: 14px;">npm_package_*</span>和<span style="font-size: 14px;">npm_config_*</span>）
为此又诞生了一个环境变量管理工具：fuck-env，取义“恶搞环境变量”，支持以上所有功能。
fuck-env 安装和使用
<span style="font-size: 14px;">npm install fuck-env<br></span>
如有一个包含 package.json 和 main.js 两个文件的项目，文件代码如下：
package.json
<span style="font-size: 14px;">{<br> "name": "fuck-env-demo",<br> "config": {<br> "PORT": 8000,<br> "APP_NAME": "$npm_package_name"<br> },<br> "scripts": {<br> "start": "fuck-env node main.js"<br> },<br> "dependencies": {<br> "fuck-env": "*"<br> }<br>}<br></span>main.js
<span style="font-size: 14px;">console.log(process.env.PORT) // 8080<br>console.log(process.env.APP_NAME) // fuck-env-demo<br></span>
执行 <span style="font-size: 14px;">fuck-env PORT=8080 npm start</span> 后，输出“8080”和“fuck-env-demo”，不论是在 Windows 还是 POSIX（macOS、Linux 等）系统中。
如果成员希望本地持久化自定义的端口号，可以新建一个 .env 文件（此文件须加入 .gitignore，不计入版本管理，格式为类 .ini 文件的简单键值对）。
.env
<span style="font-size: 14px;">PORT=8080<br></span>
以后只需执行 <span style="font-size: 14px;">npm start</span> 即可。此外 fuck-env 还提供了另一个命令行工具：fuck，用于快速设置本地环境变量。比如，如果成员又希望使用 9000 端口，可以在项目根目录下执行 <span style="font-size: 14px;">fuck set PORT 9000</span>（需全局安装 fuck-env），此时项目目录下 .env 文件的内容即会变为“PORT=9000”，使用 fuck 命令在环境变量较多时非常方便。
当环境变量过多时，全部放置 package.json 的 config 字段也会显得臃肿。fuck-env 支持统一管理默认环境变量，只需将 config 字段下所有环境变量移至 default.env 文件（计入版本库）中即可。
更多实例请参考这里
fuck-env 致力于解决用户管理环境变量时遇到的各种问题，目前还处于 Beta 阶段，未来会加入更多人性化设计。如果你有任何想法，欢迎给项目提出宝贵的建议。
原文地址：https://lon.im/post/use-envir...
本文主要分析使用环境变量管理前端项目时会遇到的问题，并介绍常用工具给出解决方案。
如何使用环境变量
在搭建基于 webpack 前端项目时（或任意基于 Node 的项目，本文以 webpack 项目为例），一般需要提供两种运行模式：开发模式和生产模式。通常的做法是，执行命令前设置环境变量 <span style="font-size: 14px;">NODE_ENV</span> 为 <span style="font-size: 14px;">production</span>，如执行 <span style="font-size: 14px;">NODE_ENV=production webpack</span> 命令，然后在 JavaScript 代码中通过 <span style="font-size: 14px;">process.env.NODE_ENV === 'production'</span> 来判断是生产模式，否则为开发模式。通过区分不同的模式可以执行不同的操作，比如在开发模式下启动开发服务器并代理转发 API，或在生产模式下压缩合并代码等。为了更好的统一前端工程命令，可以将启动开发模式和生产模式的命令分别加入 package.json 文件的 scripts 字段中，以后只需要执行 <span style="font-size: 14px;">npm start</span> 或 <span style="font-size: 14px;">npm run build</span> 即可。通过定义环境变量的方式很好的解决了在项目中执行差异操作的需求。如果希望支持成员自定义环境变量，只要在程序中优先使用环境变量中的值即可。比如已经设置端口号优先使用环境变量中的 <span style="font-size: 14px;">PORT</span> 的值，项目成员开发时执行 <span style="font-size: 14px;">PORT=8080 npm start</span> 命令就可以自定义端口号为 8080 了。
使用环境变量时遇到的问题
上述的解决方案可以适用大部分场景，但却无法解决设置环境变量的跨平台和持久化问题
跨平台
如果项目中有使用 Windows 操作系统的成员，在执行 <span style="font-size: 14px;">npm run build</span> （即 <span style="font-size: 14px;">NODE_ENV=production webpack</span>）时会失败，原因是 Windows 命令不支持使用这种方式设置环境变量。虽然在 Windows 下也可以根据 build 脚本内容，手动执行 <span style="font-size: 14px;">set NODE_ENV=production webpack</span>，却破坏了统一前端工程命令的初衷，为此需要引入一个解决跨平台设置环境变量的库。如使用 cross-env，只要改写 package.json 中的 build 脚本为 <span style="font-size: 14px;">cross-env NODE_ENV=production webpack</span> 就可以跨平台工作了。
持久化
随着规模的增大，项目自定义环境变量的数量可能越来越多。比如部署后静态资源需要使用 CDN，项目生产模式就需要提供一个环境变量用于支持自定义 webpack 的 publicPath 字段；又比如有的成员并没有把 API 服务器运行在本机，而是运行在虚拟机里或另一台电脑上，项目开发模式就需要提供两个环境变量用于支持自定义 API 服务器地址和端口号……可能有的成员每次开发时必须执行类似这么长的命令：<span style="font-size: 14px;">PORT=8080 API_SERVER=192.168.100.100 API_PORT=9000 npm start</span>，因此需要一个可以持久化环境变量的工具，比如使用 dotenv 或 env-cmd 。以 env-cmd 为例，只需创建一个 .env.local 文件（不计入版本管理），写入：
<span style="font-size: 14px;">NODE_ENV=development<br>PORT=8080<br>API_SERVER=192.168.100.100<br>API_PORT=9000<br></span>
改写 package.json 中 start 命令（build 命令类似）为 <span style="font-size: 14px;">env-cmd --fallback ./.env.local webpack</span> 即可解决自定义环境变量过多每次手动输入繁琐的问题。
真正好用的环境变量管理工具
管理环境变量有很多工具，下面简单分析一下常用工具 dotenv、cross-env 和 env-cmd 的优势与不足：
dotenv 可以解决跨平台和持久化的问题，但使用场景有限，只适用 node 项目，且和项目代码强耦合，需要在 node 代码运行后手动执行触发
cross-env 支持在命令行自定义环境变量。问题也非常明显，不能解决大型项目中自定义环境变量的持久化问题
env-cmd 也可以解决跨平台和持久化的问题，支持定义默认环境变量，不足的是不支持在命令行中自定义环境变量
事实上 NPM 本身也提供了类似设置项目环境变量的功能。以上述自定义端口号的需求为例，也可以在项目目录下执行 <span style="font-size: 14px;">npm config set project-name:PORT 8080</span>（project-name 为项目名称），执行 <span style="font-size: 14px;">npm start</span> 后在代码中可以通过 <span style="font-size: 14px;">process.env.npm_package_config_PORT</span> 获取到 8080。而且还可以将 package.json 中 config 字段设置为 <span style="font-size: 14px;">{"PORT": 8000}</span>，用于指定 <span style="font-size: 14px;">npm_package_config_PORT</span> 的默认值。使用 NPM 的 config 功能管理环境变量的最大优势是原生支持，放在 package.json config 字段中的默认环境变量也非常方便查看。遗憾是的，变量名前面都会有冗长的 <span style="font-size: 14px;">npm_package_config_</span>；脚本必须从 package.json 的 scripts 字段中执行（即执行 npm run your_script_name）；还有就是所有项目共用一份配置文件（.npmrc，默认在用户目录下），不方便手动编辑和查看。
因此一个好用的前端环境变量管理工具应该具备以下功能：
支持命令行设置环境变量
跨平台
持久化，最好能够提供一个设置本地环境变量的命令行工具
支持设置默认环境变量
支持获取 NPM 提供的环境变量（
<span style="font-size: 14px;">npm_package_*</span>和<span style="font-size: 14px;">npm_config_*</span>）
为此又诞生了一个环境变量管理工具：fuck-env，取义“恶搞环境变量”，支持以上所有功能。
fuck-env 安装和使用
<span style="font-size: 14px;">npm install fuck-env<br></span>
如有一个包含 package.json 和 main.js 两个文件的项目，文件代码如下：
package.json
<span style="font-size: 14px;">{<br> "name": "fuck-env-demo",<br> "config": {<br> "PORT": 8000,<br> "APP_NAME": "$npm_package_name"<br> },<br> "scripts": {<br> "start": "fuck-env node main.js"<br> },<br> "dependencies": {<br> "fuck-env": "*"<br> }<br>}<br></span>main.js
<span style="font-size: 14px;">console.log(process.env.PORT) // 8080<br>console.log(process.env.APP_NAME) // fuck-env-demo<br></span>
执行 <span style="font-size: 14px;">fuck-env PORT=8080 npm start</span> 后，输出“8080”和“fuck-env-demo”，不论是在 Windows 还是 POSIX（macOS、Linux 等）系统中。
如果成员希望本地持久化自定义的端口号，可以新建一个 .env 文件（此文件须加入 .gitignore，不计入版本管理，格式为类 .ini 文件的简单键值对）。
.env
<span style="font-size: 14px;">PORT=8080<br></span>
以后只需执行 <span style="font-size: 14px;">npm start</span> 即可。此外 fuck-env 还提供了另一个命令行工具：fuck，用于快速设置本地环境变量。比如，如果成员又希望使用 9000 端口，可以在项目根目录下执行 <span style="font-size: 14px;">fuck set PORT 9000</span>（需全局安装 fuck-env），此时项目目录下 .env 文件的内容即会变为“PORT=9000”，使用 fuck 命令在环境变量较多时非常方便。
当环境变量过多时，全部放置 package.json 的 config 字段也会显得臃肿。fuck-env 支持统一管理默认环境变量，只需将 config 字段下所有环境变量移至 default.env 文件（计入版本库）中即可。
以上内容就是如何更好的管理前端环境变量的方法，希望对大家有帮助。
相关推荐：
以上是更好的管理前端环境变量方法的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
无法引导到Windows恢复环境
Feb 19, 2024 pm 11:12 PM
Windows恢复环境（WinRE）是用于修复Windows操作系统错误的环境。进入WinRE后，您可以执行系统还原、出厂重置、卸载更新等操作。如果无法引导到WinRE，本文将指导您使用修复程序解决此问题。无法引导到Windows恢复环境如果无法引导至Windows恢复环境，请使用下面提供的修复程序：检查Windows恢复环境的状态使用其他方法进入Windows恢复环境您是否意外删除了Windows恢复分区？执行Windows的就地升级或全新安装下面，我们已经详细解释了所有这些修复。1]检查Wi
PHP与Vue：完美搭档的前端开发利器
Mar 16, 2024 pm 12:09 PM
PHP与Vue：完美搭档的前端开发利器在当今互联网高速发展的时代，前端开发变得愈发重要。随着用户对网站和应用的体验要求越来越高，前端开发人员需要使用更加高效和灵活的工具来创建响应式和交互式的界面。PHP和Vue.js作为前端开发领域的两个重要技术，搭配起来可以称得上是完美的利器。本文将探讨PHP和Vue的结合，以及详细的代码示例，帮助读者更好地理解和应用这两
Django是前端还是后端？一探究竟！
Jan 19, 2024 am 08:37 AM
Django是一个Python编写的web应用框架，它强调快速开发和干净方法。尽管Django是一个web框架，但是要回答Django是前端还是后端这个问题，需要深入理解前后端的概念。前端是指用户直接和交互的界面，后端是指服务器端的程序，他们通过HTTP协议进行数据的交互。在前端和后端分离的情况下，前后端程序可以独立开发，分别实现业务逻辑和交互效果，数据的交
如何使用Ajax从PHP方法中获取变量？
Mar 09, 2024 pm 05:36 PM
使用Ajax从PHP方法中获取变量是Web开发中常见的场景，通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中，将介绍如何使用Ajax从PHP方法中获取变量，并提供具体的代码示例。首先，我们需要编写一个PHP文件来处理Ajax请求，并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码：
Python 语法的思维导图：深入理解代码结构
Feb 21, 2024 am 09:00 AM
python凭借其简单易读的语法，广泛应用于广泛的领域中。掌握Python语法的基础结构至关重要，既可以提高编程效率，又能深入理解代码的运作方式。为此，本文提供了一个全面的思维导图，详细阐述了Python语法的各个方面。变量和数据类型变量是Python中用于存储数据的容器。思维导图展示了常见的Python数据类型，包括整数、浮点数、字符串、布尔值和列表。每个数据类型都有其自身的特性和操作方法。运算符运算符用于对数据类型执行各种操作。思维导图涵盖了Python中的不同运算符类型，例如算术运算符、比
什么是Java中的实例变量
Feb 19, 2024 pm 07:55 PM
Java中的实例变量是指定义在类中，而不是方法或构造函数中的变量。实例变量也称为成员变量，每个类的实例都有自己的一份实例变量副本。实例变量在创建对象的过程中被初始化，以及在对象的生命周期中保存并保持其状态。实例变量的定义通常放在类的顶部，可以用任何访问修饰符来声明，可以是public、private、protected或默认访问修饰符。这取决于我们希望这个变
Go语言前端技术探秘：前端开发新视野
Mar 28, 2024 pm 01:06 PM
Go语言作为一种快速、高效的编程语言，在后端开发领域广受欢迎。然而，很少有人将Go语言与前端开发联系起来。事实上，使用Go语言进行前端开发不仅可以提高效率，还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性，并提供具体的代码示例，帮助读者更好地了解这一领域。在传统的前端开发中，通常会使用JavaScript、HTML和CSS来构建用户界面
jQuery使用实践：判断变量是否为空的几种方式
Feb 27, 2024 pm 04:12 PM
jQuery是一个广泛应用于Web开发中的JavaScript库，它提供了许多简洁方便的方法来操作网页元素和处理事件。在实际开发中，经常会遇到需要判断变量是否为空的情况。本文将介绍使用jQuery判断变量是否为空的几种常用方法，并附上具体的代码示例。方法一：使用if语句判断varstr="";if(str){co
