本文主要分析使用环境变量管理前端项目时会遇到的问题，并介绍常用工具给出解决方案。
如何使用环境变量
在搭建基于 webpack 前端项目时（或任意基于 Node 的项目，本文以 webpack 项目为例），一般需要提供两种运行模式：开发模式和生产模式。通常的做法是，执行命令前设置环境变量 NODE_ENV 为 production，如执行 NODE_ENV=production webpack 命令，然后在 JavaScript 代码中通过 process.env.NODE_ENV === 'production' 来判断是生产模式，否则为开发模式。通过区分不同的模式可以执行不同的操作，比如在开发模式下启动开发服务器并代理转发 API，或在生产模式下压缩合并代码等。为了更好的统一前端工程命令，可以将启动开发模@本文来源gaodai$ma#com搞$代*码6网搞代gaodaima码式和生产模式的命令分别加入 package.json 文件的 scripts 字段中，以后只需要执行 npm start 或 npm run build 即可。通过定义环境变量的方式很好的解决了在项目中执行差异操作的需求。如果希望支持成员自定义环境变量，只要在程序中优先使用环境变量中的值即可。比如已经设置端口号优先使用环境变量中的 PORT 的值，项目成员开发时执行 PORT=8080 npm start 命令就可以自定义端口号为 8080 了。
使用环境变量时遇到的问题
上述的解决方案可以适用大部分场景，但却无法解决设置环境变量的跨平台和持久化问题
跨平台
如果项目中有使用 Windows 操作系统的成员，在执行 npm run build （即 NODE_ENV=production webpack）时会失败，原因是 Windows 命令不支持使用这种方式设置环境变量。虽然在 Windows 下也可以根据 build 脚本内容，手动执行 set NODE_ENV=production webpack，却破坏了统一前端工程命令的初衷，为此需要引入一个解决跨平台设置环境变量的库。如使用 cross-env，只要改写 package.json 中的 build 脚本为 cross-env NODE_ENV=production webpack 就可以跨平台工作了。
持久化
随着规模的增大，项目自定义环境变量的数量可能越来越多。比如部署后静态资源需要使用 CDN，项目生产模式就需要提供一个环境变量用于支持自定义 webpack 的 publicPath 字段；又比如有的成员并没有把 API 服务器运行在本机，而是运行在虚拟机里或另一台电脑上，项目开发模式就需要提供两个环境变量用于支持自定义 API 服务器地址和端口号……可能有的成员每次开发时必须执行类似这么长的命令：PORT=8080 API_SERVER=192.168.100.100 API_PORT=9000 npm start，因此需要一个可以持久化环境变量的工具，比如使用 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>
转载请注明原文链接：更好的管理前端环境变量方法
