집 > 기사 > 백엔드 개발 > 프런트엔드 환경 변수를 관리하는 더 나은 방법

프런트엔드 환경 변수를 관리하는 더 나은 방법

小云云원래의: 2017-12-05 16:46:552013검색

이 글에서는 주로 환경 변수를 사용하여 프런트엔드 프로젝트를 관리할 때 발생하는 문제를 분석하고 솔루션을 제공하기 위한 일반적인 도구를 소개합니다.

환경 변수 사용 방법

webpack 기반 프런트 엔드 프로젝트(또는 Node 기반 프로젝트, 이 문서에서는 webpack 프로젝트를 예로 들어)를 빌드할 때 일반적으로 다음을 제공해야 합니다. 두 가지 작동 모드: 개발 모드와 생산 모델. 일반적인 접근 방식은 <code>NODE_ENV 为 production，如执行 NODE_ENV=production webpack 命令，然后在 JavaScript 代码中通过 process.env.NODE_ENV === 'production' 来判断是生产模式，否则为开发模式。通过区分不同的模式可以执行不同的操作，比如在开发模式下启动开发服务器并代理转发 API，或在生产模式下压缩合并代码等。为了更好的统一前端工程命令，可以将启动开发模式和生产模式的命令分别加入 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>

改写 package.json 中 start 命令（build 命令类似）为 env-cmd --fallback ./.env.local webpackNODE_ENV=production 실행과 같이 명령을 실행하기 전에 환경 변수 NODE_ENV

🎜를 🎜🎜production🎜🎜로 설정하는 것입니다. webpack🎜🎜 명령을 입력한 다음 JavaScript 코드에 🎜🎜process.env.NODE_ENV === 'production'🎜🎜을 전달하여 프로덕션 모드인지 확인하고 그렇지 않으면 개발 모드인지 확인합니다. 방법. 서로 다른 모드를 구별함으로써 개발 모드에서 개발 서버 및 프록시 전달 API를 시작하거나 프로덕션 모드에서 코드를 압축 및 병합하는 등 다양한 작업을 수행할 수 있습니다. 프런트엔드 엔지니어링 명령을 보다 효과적으로 통합하려면 package.json 파일의 스크립트 필드에 개발 모드와 프로덕션 모드를 시작하는 명령을 각각 추가하면 됩니다. 앞으로는 🎜🎜npm만 실행하면 됩니다. start🎜🎜 또는 🎜🎜npm run build🎜🎜 그게 다입니다. 프로젝트에서 차등 작업을 수행해야 하는 필요성은 환경 변수를 정의함으로써 잘 해결됩니다. 멤버 정의 환경 변수를 지원하려면 프로그램에서 먼저 환경 변수의 값을 사용하십시오. 예를 들어 포트 번호가 환경 변수의 🎜🎜PORT🎜🎜 값에 우선 순위를 부여하도록 설정된 경우 프로젝트 구성원은 🎜🎜PORT=8080 npm start🎜를 실행할 수 있습니다. 🎜 명령을 개발할 때 사용자 정의 포트 번호는 8080입니다. 🎜🎜🎜🎜환경 변수 사용 시 발생하는 문제🎜🎜🎜🎜위 해결 방법은 대부분의 시나리오에 적용할 수 있지만 환경 변수 설정에 따른 크로스 플랫폼 및 지속성 문제를 해결할 수 없습니다.🎜🎜🎜🎜🎜크로스 플랫폼🎜🎜🎜 🎜🎜프로젝트에 Windows 운영 체제를 사용하는 멤버가 있는 경우 🎜🎜npm run build🎜🎜 실행 시 실패합니다(예: 🎜🎜NODE_ENV=production webpack🎜🎜 ), Windows 명령은 이러한 방식으로 환경 변수 설정을 지원하지 않기 때문입니다. Windows에서 빌드 스크립트의 내용을 기반으로 🎜🎜set NODE_ENV=production webpack🎜🎜을 수동으로 실행할 수도 있지만 이는 프런트 엔드 엔지니어링 명령을 통합하려는 원래 의도를 파괴합니다. 크로스 플랫폼 설정 환경을 도입해야 합니다. 교차 환경을 사용하는 경우 package.json의 빌드 스크립트를 🎜🎜cross-env NODE_ENV=production webpack🎜🎜으로 다시 작성하면 여러 플랫폼에서 작동합니다. 🎜🎜🎜🎜🎜Persistence🎜🎜🎜🎜🎜규모가 커짐에 따라 프로젝트의 사용자 정의 환경 변수 수가 늘어날 수 있습니다. 예를 들어 정적 리소스는 배포 후 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;">npm install fuck-env<br></span>

🎜🎜 package.json에서 시작 명령을 다시 작성합니다(빌드 명령은 유사함). 🎜🎜 env-cmd --fallback ./.env.local webpack🎜🎜을 사용하면 너무 많은 사용자 정의 환경 변수와 매번 지루한 수동 입력 문제를 해결할 수 있습니다. 🎜🎜

真正好用的环境变量管理工具

管理环境变量有很多工具，下面简单分析一下常用工具 dotenv、cross-env 和 env-cmd 的优势与不足：

dotenv 可以解决跨平台和持久化的问题，但使用场景有限，只适用 node 项目，且和项目代码强耦合，需要在 node 代码运行后手动执行触发
cross-env 支持在命令行自定义环境变量。问题也非常明显，不能解决大型项目中自定义环境变量的持久化问题
env-cmd 也可以解决跨平台和持久化的问题，支持定义默认环境变量，不足的是不支持在命令行中自定义环境变量

事实上 NPM 本身也提供了类似设置项目环境变量的功能。以上述自定义端口号的需求为例，也可以在项目目录下执行 npm config set project-name:PORT 8080（project-name 为项目名称），执行 npm start 后在代码中可以通过 process.env.npm_package_config_PORT 获取到 8080。而且还可以将 package.json 中 config 字段设置为 {"PORT": 8000}，用于指定 npm_package_config_PORT 的默认值。使用 NPM 的 config 功能管理环境变量的最大优势是原生支持，放在 package.json config 字段中的默认环境变量也非常方便查看。遗憾是的，变量名前面都会有冗长的 npm_package_config_；脚本必须从 package.json 的 scripts 字段中执行（即执行 npm run your_script_name）；还有就是所有项目共用一份配置文件（.npmrc，默认在用户目录下），不方便手动编辑和查看。

因此一个好用的前端环境变量管理工具应该具备以下功能：

支持命令行设置环境变量
跨平台
持久化，最好能够提供一个设置本地环境变量的命令行工具
支持设置默认环境变量
支持获取 NPM 提供的环境变量（npm_package_* 和 npm_config_*）

为此又诞生了一个环境变量管理工具：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>

执行 fuck-env PORT=8080 npm start 后，输出“8080”和“fuck-env-demo”，不论是在 Windows 还是 POSIX（macOS、Linux 等）系统中。

如果成员希望本地持久化自定义的端口号，可以新建一个 .env 文件（此文件须加入 .gitignore，不计入版本管理，格式为类 .ini 文件的简单键值对）。

.env

<span style="font-size: 14px;">PORT=8080<br></span>

以后只需执行 npm start 即可。此外 fuck-env 还提供了另一个命令行工具：fuck，用于快速设置本地环境变量。比如，如果成员又希望使用 9000 端口，可以在项目根目录下执行 fuck set PORT 9000（需全局安装 fuck-env），此时项目目录下 .env 文件的内容即会变为“PORT=9000”，使用 fuck 命令在环境变量较多时非常方便。

환경 변수가 너무 많으면 package.json의 모든 구성 필드도 부풀어오르게 나타납니다. fuck-env는 기본 환경 변수의 통합 관리를 지원합니다. 구성 필드 아래의 모든 환경 변수를 default.env 파일(버전 라이브러리에 포함됨)로 이동하면 됩니다.

더 많은 예시는 여기를 참고하세요

fuck-env는 환경 변수 관리 시 사용자가 직면하는 다양한 문제를 해결하기 위해 최선을 다하고 있습니다. 아직은 베타 단계이며 앞으로 더욱 사용자 친화적인 디자인이 추가될 예정입니다. 미래. 아이디어가 있으시면 프로젝트에 대한 귀중한 제안을 환영합니다.

원본주소 : https://lon.im/post/use-envir...

이 글에서는 주로 환경변수를 사용하여 프론트엔드 프로젝트를 관리할 때 발생하는 문제점을 분석하고 소개합니다. 일반적으로 사용되는 도구 솔루션을 제공하십시오.

환경 변수 사용 방법

webpack 기반 프런트엔드 프로젝트(또는 Node 기반 프로젝트, 이 문서에서는 webpack 프로젝트를 예로 들어 설명함)를 구축할 때 일반적으로 두 가지 운영 모드를 제공해야 합니다. : 개발 모드와 생산 모드. 일반적인 접근 방식은 <code>NODE_ENV 为 production，如执行 NODE_ENV=production webpack 命令，然后在 JavaScript 代码中通过 process.env.NODE_ENV === 'production' 来判断是生产模式，否则为开发模式。通过区分不同的模式可以执行不同的操作，比如在开发模式下启动开发服务器并代理转发 API，或在生产模式下压缩合并代码等。为了更好的统一前端工程命令，可以将启动开发模式和生产模式的命令分别加入 package.json 文件的 scripts 字段中，以后只需要执行 npm start 或 npm run build 即可。通过定义环境变量的方式很好的解决了在项目中执行差异操作的需求。如果希望支持成员自定义环境变量，只要在程序中优先使用环境变量中的值即可。比如已经设置端口号优先使用环境变量中的 PORT 的值，项目成员开发时执行 PORT=8080 npm start 命令就可以自定义端口号为 8080 了。

使用环境变量时遇到的问题

上述的解决方案可以适用大部分场景，但却无法解决设置环境变量的跨平台和持久化问题

跨平台

를 production로 설정하는 것입니다. webpack

🎜 명령을 입력한 다음 JavaScript 코드에서 🎜🎜process.env.NODE_ENV === 'production'🎜🎜을 사용하여 프로덕션 모드인지 확인하고 그렇지 않으면 개발 모드인지 확인합니다. 방법. 서로 다른 모드를 구별함으로써 개발 모드에서 개발 서버 및 프록시 전달 API를 시작하거나 프로덕션 모드에서 코드를 압축 및 병합하는 등 다양한 작업을 수행할 수 있습니다. 프런트엔드 엔지니어링 명령을 보다 효과적으로 통합하려면 package.json 파일의 스크립트 필드에 개발 모드와 프로덕션 모드를 시작하는 명령을 각각 추가하면 됩니다. 앞으로는 🎜🎜npm만 실행하면 됩니다. start🎜🎜 또는 🎜🎜npm run build🎜🎜 그게 다입니다. 프로젝트에서 차등 작업을 수행해야 하는 필요성은 환경 변수를 정의함으로써 잘 해결됩니다. 멤버 정의 환경 변수를 지원하려면 프로그램에서 먼저 환경 변수의 값을 사용하십시오. 예를 들어 포트 번호가 환경 변수의 🎜🎜PORT🎜🎜 값에 우선 순위를 부여하도록 설정된 경우 프로젝트 구성원은 🎜🎜PORT=8080 npm start🎜를 실행할 수 있습니다. 🎜 명령을 개발할 때 사용자 정의 포트 번호는 8080입니다. 🎜🎜🎜🎜환경 변수 사용 시 발생하는 문제🎜🎜🎜🎜위 해결 방법은 대부분의 시나리오에 적용할 수 있지만 환경 변수 설정에 따른 크로스 플랫폼 및 지속성 문제를 해결할 수 없습니다.🎜🎜🎜🎜🎜크로스 플랫폼🎜🎜🎜 🎜🎜프로젝트에 Windows 운영 체제를 사용하는 멤버가 있는 경우 🎜🎜npm run build🎜🎜 실행 시 실패합니다(예: 🎜🎜NODE_ENV=production webpack🎜🎜 ), Windows 명령은 이러한 방식으로 환경 변수 설정을 지원하지 않기 때문입니다. Windows에서 빌드 스크립트의 내용을 기반으로 🎜🎜set NODE_ENV=production webpack🎜🎜을 수동으로 실행할 수도 있지만 이는 프런트 엔드 엔지니어링 명령을 통합하려는 원래 의도를 파괴합니다. 크로스 플랫폼 설정 환경을 도입해야 합니다. 교차 환경을 사용하는 경우 package.json의 빌드 스크립트를 🎜🎜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>

改写 package.json 中 start 命令（build 命令类似）为 env-cmd --fallback ./.env.local webpack 即可解决自定义环境变量过多每次手动输入繁琐的问题。

真正好用的环境变量管理工具

管理环境变量有很多工具，下面简单分析一下常用工具 dotenv、cross-env 和 env-cmd 的优势与不足：

dotenv 可以解决跨平台和持久化的问题，但使用场景有限，只适用 node 项目，且和项目代码强耦合，需要在 node 代码运行后手动执行触发
cross-env 支持在命令行自定义环境变量。问题也非常明显，不能解决大型项目中自定义环境变量的持久化问题
env-cmd 也可以解决跨平台和持久化的问题，支持定义默认环境变量，不足的是不支持在命令行中自定义环境变量

因此一个好用的前端环境变量管理工具应该具备以下功能：

支持命令行设置环境变量
跨平台
持久化，最好能够提供一个设置本地环境变量的命令行工具
支持设置默认环境变量
支持获取 NPM 提供的环境变量（npm_package_* 和 npm_config_*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;">npm install fuck-env<br></span>

package.json에서 시작 명령을 다시 작성합니다(빌드 명령은 유사함). env-cmd --fallback ./.env.local webpack

은 너무 많은 사용자 정의 환경 변수와 매번 지루한 수동 입력 문제를 해결할 수 있습니다.

정말 사용하기 쉬운 환경 변수 관리 도구

환경 변수를 관리하는 도구는 많이 있습니다. 일반적으로 사용되는 도구 dotenv, 크로스-의 장단점을 간략하게 분석해 보겠습니다. env 및 env-cmd:

dotenv는 크로스 플랫폼 및 지속성 문제를 해결할 수 있지만 사용 시나리오는 노드 프로젝트에만 적용 가능합니다. 프로젝트 코드와 강력하게 결합되어 있습니다. 수동 실행 후
cross-env 트리거는 명령줄에서 환경 변수 사용자 정의를 지원합니다. 문제는 또한 대규모 프로젝트에서 사용자 정의 환경 변수의 지속성 문제를 해결할 수 없습니다.
🎜
🎜🎜env-cmd는 크로스 플랫폼 및 지속성 문제도 해결할 수 있습니다. 단점은 명령줄에서 환경 변수 사용자 정의를 지원하지 않는다는 것입니다🎜🎜🎜🎜🎜🎜실제로 NPM 자체도 프로젝트 환경 변수 설정과 유사한 기능을 제공합니다. 위의 사용자 정의 포트 번호 요구 사항을 예로 들면, 프로젝트 디렉터리에서 🎜🎜npm config set project-name:PORT 8080🎜🎜(project-name은 프로젝트 이름)을 실행할 수도 있고 🎜🎜npm start🎜🎜를 실행하면 🎜🎜process.env.npm_package_config_PORT🎜🎜를 통해 코드에서 8080을 얻을 수 있습니다. 또한 package.json의 구성 필드를 🎜🎜{"PORT": 8000}🎜🎜로 설정할 수도 있습니다. 이는 🎜🎜npm_package_config_PORT🎜의 기본값을 지정하는 데 사용됩니다. 코드>🎜. NPM의 config 기능을 사용하여 환경 변수를 관리할 때 가장 큰 장점은 package.json config 필드에 있는 기본 환경 변수를 보기에도 매우 편리하다는 것입니다. 불행하게도 변수 이름 앞에 긴 🎜<code>🎜npm_package_config_🎜🎜이 있습니다. 스크립트는 package.json의 스크립트 필드에서 실행되어야 합니다(즉, npm run your_script_name 실행). 모든 프로젝트는 A 구성 파일(.npmrc, 기본적으로 사용자 디렉터리에 있음)을 공유하므로 수동으로 편집하고 보기에는 불편합니다. 🎜🎜🎜🎜따라서 유용한 프런트 엔드 환경 변수 관리 도구에는 다음 기능이 있어야 합니다. 🎜🎜
- 🎜🎜환경 변수 명령줄 설정 지원🎜🎜🎜 🎜🎜크로스 플랫폼🎜🎜🎜
- 🎜🎜지속성, 로컬 환경 변수 설정을 위한 명령줄 도구를 제공하는 것이 가장 좋습니다🎜🎜🎜
- 🎜🎜기본 환경 변수 설정 지원🎜🎜🎜
- 🎜🎜지원 NPM에서 제공하는 환경 변수 가져오기(🎜🎜npm_package_*🎜🎜 및 🎜🎜npm_config_*🎜🎜)🎜🎜🎜🎜🎜🎜또 다른 환경 변수 관리는 다음과 같습니다. 이를 위해 탄생한 도구: fuck-env는 "환경 변수 엿먹이기"를 의미하며 위의 모든 기능을 지원합니다. 🎜🎜🎜🎜🎜fuck-env 설치 및 사용 🎜🎜🎜
```
{  "name": "fuck-env-demo",  "config": {    "PORT": 8000,    "APP_NAME": "$npm_package_name"  },  "scripts": {    "start": "fuck-env node main.js"  },  "dependencies": {    "fuck-env": "*"  } } 
```
 🎜🎜package.json과 main.js라는 두 개의 파일이 포함된 프로젝트가 있는 경우 파일 코드는 다음과 같습니다. 🎜🎜🎜🎜package.json🎜🎜
```
console.log(process.env.PORT)     // 8080 console.log(process.env.APP_NAME) // fuck-env-demo 
```
 🎜🎜 main.js🎜🎜
```
console.log(process.env.PORT)     // 8080 console.log(process.env.APP_NAME) // fuck-env-demo 
```
 执行 fuck-env PORT=8080 npm start 后，输出“8080”和“fuck-env-demo”，不论是在 Windows 还是 POSIX（macOS、Linux 等）系统中。
 
 如果成员希望本地持久化自定义的端口号，可以新建一个 .env 文件（此文件须加入 .gitignore，不计入版本管理，格式为类 .ini 文件的简单键值对）。
 
 .env
```
PORT=8080 
```
 以后只需执行 npm start 即可。此外 fuck-env 还提供了另一个命令行工具：fuck，用于快速设置本地环境变量。比如，如果成员又希望使用 9000 端口，可以在项目根目录下执行 fuck set PORT 9000（需全局安装 fuck-env），此时项目目录下 .env 文件的内容即会变为“PORT=9000”，使用 fuck 命令在环境变量较多时非常方便。
 
 当环境变量过多时，全部放置 package.json 的 config 字段也会显得臃肿。fuck-env 支持统一管理默认环境变量，只需将 config 字段下所有环境变量移至 default.env 文件（计入版本库）中即可。
 
 以上内容就是如何更好的管理前端环境变量的方法，希望对大家有帮助。
 
 相关推荐：
 
 什么是环境变量？环境变量的作用
 
 分享环境变量与文件查找实例
 
 Linux设置和查看环境变量的方法

위 내용은 프런트엔드 환경 변수를 관리하는 더 나은 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Ruby로 구현된 이미지 필터 알고리즘 코드다음 기사：Ruby로 구현된 이미지 필터 알고리즘 코드