Meilleure façon de gérer les variables d'environnement front-end-tutoriel php-php.cn

Cet article analyse principalement les problèmes rencontrés lors de l'utilisation de variables d'environnement pour gérer des projets front-end, et présente des outils courants pour apporter des solutions.

Comment utiliser les variables d'environnement

Lors de la construction d'un projet front-end basé sur webpack (ou tout projet basé sur des nœuds (cet article prend le projet webpack comme exemple) doit généralement fournir deux modes de fonctionnement : le mode développement et le mode production. L'approche habituelle consiste à définir la variable d'environnement <code>NODE_ENVNODE_ENV sur productionproductionNODE_ENV=production webpack , comme exécuter la commande NODE_ENV=production webpackprocess.env.NODE_ENV === 'production', puis transmettre <code>npm startprocess.env.NODE_ENV dans le code JavaScript code === 'production' pour déterminer si c'est le mode production, sinon c'est le mode développement. En distinguant les différents modes, vous pouvez effectuer différentes opérations, telles que le démarrage d'un serveur de développement et des API de transfert de proxy en mode développement, ou la compression et la fusion de code en mode production. Afin de mieux unifier les commandes d'ingénierie frontale, vous pouvez ajouter les commandes pour démarrer le mode développement et le mode production respectivement au champ scripts du fichier package.json. À l'avenir, il vous suffira d'exécuter npm run build. npm start code><code>PORT ou npm run buildPORT=8080 npm start. La nécessité d'effectuer des opérations différentielles dans le projet est bien résolue en définissant des variables d'environnement. Si vous souhaitez prendre en charge les variables d'environnement définies par les membres, utilisez simplement d'abord la valeur de la variable d'environnement dans le programme. Par exemple, si le numéro de port a été défini pour donner la priorité à la valeur de

PORT

dans la variable d'environnement, les membres du projet exécuteront

PORT= lors du développement. La commande 8080 npm start

peut personnaliser le numéro de port sur 8080.

Problèmes rencontrés lors de l'utilisation des variables d'environnement

Les solutions ci-dessus peuvent être appliquées à la plupart des scénarios, mais elles ne peuvent pas résoudre le problème de la définition des variables d'environnement . Problèmes multiplateformes et de persistance

npm run buildMultiplateformeNODE_ENV=production webpackset NODE_ENV=production webpackS'il y a des membres qui utilisent le système d'exploitation Windows dans. le projet, lors de l'exécution de npm run buildcross-env NODE_ENV=production webpack (c'est-à-dire

NODE_ENV=production webpack

) échouera car les commandes Windows ne prennent pas en charge la définition des variables d'environnement de cette manière. Bien que sous Windows, vous puissiez également exécuter manuellement set NODE_ENV=production webpack

en fonction du contenu du script de build, cela détruit l'intention initiale d'unifier le front -fin des commandes d'ingénierie. Une bibliothèque doit être introduite pour résoudre le problème de la définition des variables d'environnement sur toutes les plates-formes. Si vous utilisez cross-env, réécrivez simplement le script de construction dans package.json en

cross-env NODE_ENV=production webpackPORT=8080 API_SERVER=192.168.100.100 API_PORT=9000 npm start et il fonctionnera sur toutes les plateformes.

<span style="font-size: 14px;">NODE_ENV=development<br>PORT=8080<br>API_SERVER=192.168.100.100<br>API_PORT=9000<br></span>

Copier après la connexion

Persistanceenv-cmd --fallback ./.env.local webpackÀ mesure que l'échelle du projet augmente, le nombre de variables d'environnement personnalisées pour le projet peut augmenter . beaucoup. Par exemple, les ressources statiques doivent utiliser CDN après le déploiement et le mode de production du projet doit fournir une variable d'environnement pour prendre en charge le champ publicPath du webpack personnalisé. Par exemple, certains membres n'exécutent pas le serveur API localement, mais l'exécutent dans un serveur API ; machine virtuelle. Ou sur un autre ordinateur, le mode de développement du projet doit fournir deux variables d'environnement pour prendre en charge l'adresse du serveur API personnalisée et le numéro de port... Certains membres peuvent devoir exécuter une longue commande comme celle-ci à chaque fois qu'ils développent :

PORT=8080 API_SERVER=192.168.100.100 API_PORT=9000 npm start, vous avez donc besoin d'un outil capable de conserver les variables d'environnement, telles que dotenv ou env-cmd. En prenant env-cmd comme exemple, il vous suffit de créer un fichier .env.local (non inclus dans la gestion des versions) et d'écrire : Réécrire la commande start dans le package .json (La commande build est similaire) à env-cmd --fallback ./.env.local webpack pour résoudre le problème du trop grand nombre de personnalisations les variables d'environnement étant saisies manuellement à chaque fois Questions triviales.

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

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

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

事实上 NPM 本身也提供了类似设置项目环境变量的功能。以上述自定义端口号的需求为例，也可以在项目目录下执行 npm config set project-name:PORT 8080（project-name 为项目名称），执行 <code>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>

Copier après la connexion

如有一个包含 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>

Copier après la connexion

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>

Copier après la connexion

执行 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>

Copier après la connexion

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

Lorsqu'il y a trop de variables d'environnement, tous les champs de configuration de package.json apparaîtront également gonflés. fuck-env prend en charge la gestion unifiée des variables d'environnement par défaut. Déplacez simplement toutes les variables d'environnement sous le champ de configuration vers le fichier default.env (inclus dans la bibliothèque de versions).

Pour plus d'exemples, veuillez vous référer ici

fuck-env s'engage à résoudre divers problèmes rencontrés par les utilisateurs lors de la gestion des variables d'environnement. Actuellement, Il est en phase bêta et des conceptions plus conviviales seront ajoutées à l'avenir. Si vous avez des idées, n'hésitez pas à donner de précieuses suggestions au projet.

Adresse originale : https://lon.im/post/use-envir...

Comment utiliser les variables d'environnement

Lors de la construction d'un projet front-end basé sur webpack (ou de tout projet basé sur Node, cet article prend le projet webpack à titre d'exemple), doivent généralement prévoir deux modes de fonctionnement : le mode développement et le mode production. L'approche habituelle consiste à définir la variable d'environnement <code>NODE_ENVNODE_ENV sur productionproductionNODE_ENV=production webpack , comme exécuter la commande NODE_ENV=production webpackprocess.env.NODE_ENV === 'production', puis transmettre <code>npm startprocess.env.NODE_ENV dans le code JavaScript code === 'production' pour déterminer si c'est le mode production, sinon c'est le mode développement. En distinguant les différents modes, vous pouvez effectuer différentes opérations, telles que le démarrage d'un serveur de développement et des API de transfert de proxy en mode développement, ou la compression et la fusion de code en mode production. Afin de mieux unifier les commandes d'ingénierie frontale, vous pouvez ajouter les commandes pour démarrer le mode développement et le mode production respectivement au champ scripts du fichier package.json. À l'avenir, il vous suffira d'exécuter npm run build. npm start code><code>PORT ou npm run buildPORT=8080 npm start. La nécessité d'effectuer des opérations différentielles dans le projet est bien résolue en définissant des variables d'environnement. Si vous souhaitez prendre en charge les variables d'environnement définies par les membres, utilisez simplement d'abord la valeur de la variable d'environnement dans le programme. Par exemple, si le numéro de port a été défini pour donner la priorité à la valeur de

PORT

dans la variable d'environnement, les membres du projet exécuteront

PORT= lors du développement. La commande 8080 npm start

peut personnaliser le numéro de port sur 8080.

Problèmes rencontrés lors de l'utilisation des variables d'environnement

NODE_ENV=production webpack

en fonction du contenu du script de build, cela détruit l'intention initiale d'unifier le front -commandes d'ingénierie de fin Une bibliothèque doit être introduite pour résoudre le problème de la définition des variables d'environnement sur toutes les plates-formes. Si vous utilisez cross-env, réécrivez simplement le script de construction dans package.json en cross-env NODE_ENV=production webpack et il fonctionnera sur toutes les plateformes. Persistance

À mesure que l'échelle augmente, le nombre de variables d'environnement personnalisées pour le projet peut augmenter. Par exemple, les ressources statiques doivent utiliser CDN après le déploiement et le mode de production du projet doit fournir une variable d'environnement pour prendre en charge le champ publicPath du webpack personnalisé. Par exemple, certains membres n'exécutent pas le serveur API localement, mais l'exécutent dans un serveur API ; machine virtuelle. Ou sur un autre ordinateur, le mode de développement du projet doit fournir deux variables d'environnement pour prendre en charge l'adresse du serveur API personnalisée et le numéro de port... Certains membres peuvent devoir exécuter une longue commande comme celle-ci à chaque fois qu'ils développent : PORT=8080 API_SERVER=192.168.100.100 API_PORT=9000 npm startPORT=8080 API_SERVER=192.168.100.100 API_PORT=9000 npm start, vous avez donc besoin d'un outil capable de conserver les variables d'environnement, telles que dotenv ou env-cmd. En prenant env-cmd comme exemple, il vous suffit de créer un fichier .env.local (non inclus dans la gestion des versions) et d'écrire :

<span style="font-size: 14px;">NODE_ENV=development<br>PORT=8080<br>API_SERVER=192.168.100.100<br>API_PORT=9000<br></span>

Copier après la connexion

Réécrire la commande start dans le package .json (La commande build est similaire) à env-cmd --fallback ./.env.local webpackenv-cmd --fallback ./.env.local webpack

pour résoudre le problème du trop grand nombre de personnalisations les variables d'environnement étant saisies manuellement à chaque fois Questions triviales.

Un outil de gestion des variables d'environnement vraiment utile

Il existe de nombreux outils pour gérer les variables d'environnement. Analysons brièvement les outils couramment utilisés dotenv et cross. -env. Avantages et inconvénients de et env-cmd :

dotenv peut résoudre les problèmes multiplateformes et de persistance, mais ses scénarios d'utilisation sont limités et ne sont applicables que aux projets de nœud, et le code du projet est fortement couplé et doit être déclenché manuellement après l'exécution du code du nœud
cross-env prend en charge la personnalisation des variables d'environnement sur. la ligne de commande. Le problème est également très évident. Il ne peut pas résoudre le problème de persistance des variables d'environnement personnalisées dans les grands projets
env-cmd peut également résoudre le problème du multiplateforme. et la persistance. Il prend en charge la définition des variables d'environnement par défaut. L'inconvénient est qu'il ne prend pas en charge la personnalisation des variables d'environnement dans la ligne de commande

npm config set project-name:PORT 8080En fait, NPM lui-même fournit également. paramètres similaires pour les variables d’environnement du projet. En prenant comme exemple l'exigence ci-dessus pour les numéros de port personnalisés, vous pouvez également exécuter npm config set project-name:PORT 8080<code>npm start(le nom du projet est le nom du projet), après avoir exécuté process.env.npm_package_config_PORTnpm start, vous pouvez passer {"PORT": 8000}process.env.npm_package_config_PORT dans le code npm_package_config_PORT Obtenez 8080. Et vous pouvez également définir le champ de configuration dans package.json sur {"PORT": 8000}npm_package_config_ pour spécifier

Valeur par défaut pour npm_package_config_PORT

. Le plus grand avantage de l'utilisation de la fonction de configuration de NPM pour gérer les variables d'environnement est la prise en charge native. Les variables d'environnement par défaut placées dans le champ de configuration package.json sont également très pratiques à afficher. Malheureusement, les noms de variables auront de longs

npm_package_config_

; le script doit être exécuté à partir du champ scripts de package.json (c'est-à-dire, exécutez npm, exécutez votre_nom_script) ; De plus, tous les projets partagent un fichier de configuration (.npmrc, dans le répertoire utilisateur par défaut), ce qui n'est pas pratique pour l'édition et la visualisation manuelles.
Par conséquent, un outil utile de gestion des variables d'environnement front-end devrait avoir les fonctions suivantes :
Prise en charge de la ligne de commande Paramètres d'environnement Variables
Multiplateforme
Persistance, il est préférable de fournir un paramètre pour l'environnement local L'outil de ligne de commande pour les variables
npm_package_* prend en charge la définition des variables d'environnement par défaut npm_config_*
prend en charge l'obtention des variables d'environnement fournies par NPM (

npm_package_*

npm_config_*

)

<span style="font-size: 14px;">npm install fuck-env<br></span>

Copier après la connexion

Pour cette raison, un autre outil de gestion de variables d'environnement est né : fuck-env, qui signifie « fausses variables d'environnement » et prend en charge toutes les fonctions ci-dessus .

fuck-env Installez et utilisez

<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>

Copier après la connexion

S'il y en a un contenant package.json et main. js Pour un projet à deux fichiers, le code du fichier est le suivant :

package.jsonmain.js

<span style="font-size: 14px;">console.log(process.env.PORT)     // 8080<br>console.log(process.env.APP_NAME) // fuck-env-demo<br></span>

Copier après la connexion

执行 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>

Copier après la connexion

当环境变量过多时，全部放置 package.json 的 config 字段也会显得臃肿。fuck-env 支持统一管理默认环境变量，只需将 config 字段下所有环境变量移至 default.env 文件（计入版本库）中即可。

以上内容就是如何更好的管理前端环境变量的方法，希望对大家有帮助。