フロントエンド環境変数を管理するためのより良い方法-PHPチュートリアル-php.cn

この記事では主に、環境変数を使用してフロントエンドプロジェクトを管理するときに発生する問題を分析し、解決策を提供する一般的なツールを紹介します。

環境変数の使用方法

webpack に基づいてフロントエンドプロジェクト (または Node に基づいた任意のプロジェクト、この記事では webpack プロジェクトを例にします) を構築する場合、通常、以下を提供する必要があります。 2 つの動作モード: 開発モードと運用モデル。通常のアプローチは、コマンドを実行する前に環境変数 <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 コードで 🎜<code>🎜process.env.NODE_ENV === 'production'🎜

🎜 を使用して運用モードかどうかを判断します。それ以外の場合は開発モードです。モード。異なるモードを区別することで、開発サーバーの起動や開発モードでの API のプロキシ転送、運用モードでのコードの圧縮やマージなど、さまざまな操作を実行できます。フロントエンドエンジニアリングコマンドをより適切に統合するために、開発モードと運用モードをそれぞれ開始するコマンドを package.json ファイルの script フィールドに追加できるようになります。今後は、🎜🎜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 サーバーのアドレスとポート番号をサポートする 2 つの環境変数を提供する必要があります...メンバーによっては、開発のたびに次のような長いコマンドを実行する必要がある場合があります: 🎜 🎜PORT=8080 API_SERVER=192.168.100.100 API_PORT=9000 npm start🎜🎜 したがって、dotenv や env-cmd などの環境変数を永続化できるツールが必要です。 env-cmd を例にとると、.env.local ファイル (バージョン管理には含まれていません) を作成し、次のように記述するだけです。 🎜🎜 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 内のすべての設定フィールドも肥大化して表示されます。 funk-env は、デフォルトの環境変数の統合管理をサポートしています。config フィールドにあるすべての環境変数を、default.env ファイル (バージョンライブラリに含まれています) に移動するだけです。

その他の例については、こちらを参照してください

fuck-env は、環境変数を管理する際にユーザーが遭遇するさまざまな問題の解決に取り組んでいます。現在はベータ版であり、よりユーザーフレンドリーなデザインが追加される予定です。未来。アイデアをお持ちの場合は、プロジェクトに貴重なご提案をお待ちしております。

元のアドレス: https://lon.im/post/use-envir...

この記事では主に、環境変数を使用してフロントエンドプロジェクトを管理するときに発生する問題を分析し、紹介します。よく使用されるツール解決策を提供します。

環境変数の使用方法

webpack に基づいてフロントエンドプロジェクト (または Node に基づいた任意のプロジェクト、この記事では例として webpack プロジェクトを取り上げます) を構築する場合、通常、2 つの動作モードを提供する必要があります。 : 開発モードと本番モード。通常のアプローチは、コマンドを実行する前に環境変数 <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 に設定します (

NODE_ENV=production を実行するなど)。 webpack🎜 コマンドを実行し、JavaScript コードで 🎜<code>🎜process.env.NODE_ENV === 'production'🎜

規模が大きくなるにつれて、プロジェクトのカスタム環境変数の数が増加する可能性があります。たとえば、静的リソースはデプロイ後に CDN を使用する必要があり、プロジェクト実稼働モードではカスタム Webpack の publicPath フィールドをサポートする環境変数を提供する必要があります。たとえば、一部のメンバーは API サーバーをローカルで実行せず、または、別のコンピューターでは、プロジェクト開発モードでカスタム API サーバーのアドレスとポート番号をサポートする 2 つの環境変数を提供する必要があります...メンバーによっては、開発のたびに次のような長いコマンドを実行する必要がある場合があります: 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 ファイル (バージョン管理には含まれていません) を作成し、次のように記述するだけです。

は、カスタム環境変数が多すぎる問題と、毎回面倒な手動入力の問題を解決できます。

本当に使いやすい環境変数管理ツール

環境変数を管理するためのツールは数多くあります。ここでは、一般的に使用されるツール dotenv、cross- の長所と短所を簡単に分析します。 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 の config フィールドを 🎜🎜{"PORT": 8000}🎜🎜 に設定することもできます。これは、🎜🎜npm_package_config_PORT🎜 のデフォルト値を指定するために使用されます。コード>🎜。 NPM の config 関数を使用して環境変数を管理する最大の利点は、package.json config フィールドに配置されたデフォルトの環境変数も非常に便利であることです。残念ながら、変数名の前に長い 🎜<code>🎜npm_package_config_🎜🎜 があり、スクリプトは package.json の script フィールドから実行する必要があります (つまり、npm run your_script_name を実行します)。すべてのプロジェクトは、構成ファイル (デフォルトではユーザーディレクトリにある .npmrc) を共有しますが、手動で編集したり表示したりするには不便です。 🎜🎜🎜🎜そのため、便利なフロントエンド環境変数管理ツールには次の機能が必要です: 🎜🎜
- 🎜🎜環境変数のコマンドライン設定をサポート🎜🎜🎜 🎜🎜クロスプラットフォーム🎜🎜🎜
- 🎜🎜永続性、ローカル環境変数を設定するためのコマンドラインツールを提供することが最善です🎜🎜🎜
- 🎜🎜デフォルトの環境変数の設定をサポート🎜🎜🎜
- 🎜🎜サポート NPM によって提供される環境変数を取得します (🎜🎜npm_package_*🎜🎜 および 🎜🎜npm_config_*🎜🎜)🎜🎜🎜🎜🎜🎜もう 1 つの環境変数管理は、この目的のために生まれたツール:「ファック環境変数」を意味するfuck-envは、上記の機能をすべてサポートしています。 🎜🎜🎜🎜🎜fuck-envのインストールと使用🎜🎜🎜
```
npm install fuck-env 
```
 ログイン後にコピー
 ログイン後にコピー
 🎜🎜package.jsonとmain.jsの2つのファイルを含むプロジェクトがある場合、ファイルコードは次のとおりです: 🎜🎜🎜🎜package.json🎜🎜
```
{  "name": "fuck-env-demo",  "config": {    "PORT": 8000,    "APP_NAME": "$npm_package_name"  },  "scripts": {    "start": "fuck-env node main.js"  },  "dependencies": {    "fuck-env": "*"  } } 
```
 ログイン後にコピー
 ログイン後にコピー
 🎜🎜 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设置和查看环境变量的方法