Maison > Article > développement back-end > Meilleure façon de gérer les variables d'environnement front-end
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.
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><span style="font-size: 14px;">NODE_ENV</span>
NODE_ENV sur <span style="font-size: 14px;">production</span>
<span style="font-size: 14px;">production</span>
<span style="font-size: 14px;">NODE_ENV=production webpack</span>
, comme exécuter la commande NODE_ENV=production webpack
<span style="font-size: 14px;">process.env.NODE_ENV === 'production'</span>
, puis transmettre <code><span style="font-size: 14px;">npm start</span>
process.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 <span style="font-size: 14px;">npm run build</span>
. <span style="font-size: 14px;">npm start</span> code><code><span style="font-size: 14px;">PORT</span>
ou npm run build
<span style="font-size: 14px;">PORT=8080 npm start</span>
. 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
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<span style="font-size: 14px;">npm run build</span>
Multiplateforme<span style="font-size: 14px;">NODE_ENV=production webpack</span>
<span style="font-size: 14px;">set NODE_ENV=production webpack</span>
S'il y a des membres qui utilisent le système d'exploitation Windows dans. le projet, lors de l'exécution de npm run build
<span style="font-size: 14px;">cross-env NODE_ENV=production webpack</span>
(c'est-à-dire
) é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
<span style="font-size: 14px;">cross-env NODE_ENV=production webpack</span>
<span style="font-size: 14px;">PORT=8080 API_SERVER=192.168.100.100 API_PORT=9000 npm start</span>
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>
Persistance<span style="font-size: 14px;">env-cmd --fallback ./.env.local webpack</span>
À 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 :
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 本身也提供了类似设置项目环境变量的功能。以上述自定义端口号的需求为例,也可以在项目目录下执行 <span style="font-size: 14px;">npm config set project-name:PORT 8080</span>
(project-name 为项目名称),执行 <code><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>
以后只需执行 <code><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 命令在环境变量较多时非常方便。
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...
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.
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><span style="font-size: 14px;">NODE_ENV</span>
NODE_ENV sur <span style="font-size: 14px;">production</span>
<span style="font-size: 14px;">production</span>
<span style="font-size: 14px;">NODE_ENV=production webpack</span>
, comme exécuter la commande NODE_ENV=production webpack
<span style="font-size: 14px;">process.env.NODE_ENV === 'production'</span>
, puis transmettre <code><span style="font-size: 14px;">npm start</span>
process.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 <span style="font-size: 14px;">npm run build</span>
. <span style="font-size: 14px;">npm start</span> code><code><span style="font-size: 14px;">PORT</span>
ou npm run build
<span style="font-size: 14px;">PORT=8080 npm start</span>
. 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
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<span style="font-size: 14px;">npm run build</span>
Multiplateforme<span style="font-size: 14px;">NODE_ENV=production webpack</span>
<span style="font-size: 14px;">set NODE_ENV=production webpack</span>
S'il y a des membres qui utilisent le système d'exploitation Windows dans. le projet, lors de l'exécution de npm run build
<span style="font-size: 14px;">cross-env NODE_ENV=production webpack</span>
(c'est-à-dire
) é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
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 : <span style="font-size: 14px;">PORT=8080 API_SERVER=192.168.100.100 API_PORT=9000 npm start</span>
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 :
<span style="font-size: 14px;">NODE_ENV=development<br>PORT=8080<br>API_SERVER=192.168.100.100<br>API_PORT=9000<br></span>
Réécrire la commande start dans le package .json (La commande build est similaire) à <span style="font-size: 14px;">env-cmd --fallback ./.env.local webpack</span>
<span style="font-size: 14px;">env-cmd --fallback ./.env.local webpack</span>
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
<span style="font-size: 14px;">npm config set project-name:PORT 8080</span>
En 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><span style="font-size: 14px;">npm start</span>(le nom du projet est le nom du projet), après avoir exécuté
, vous pouvez passer <span style="font-size: 14px;">process.env.npm_package_config_PORT</span>
npm start<span style="font-size: 14px;">{"PORT": 8000}</span>
<span style="font-size: 14px;">process.env.npm_package_config_PORT</span> dans le code
<span style="font-size: 14px;">npm_package_config_PORT</span>
Obtenez 8080. Et vous pouvez également définir le champ de configuration dans package.json sur {"PORT": 8000}
<span style="font-size: 14px;">npm_package_config_</span>
pour spécifier
. 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
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
<span style="font-size: 14px;">npm_package_*</span>
prend en charge la définition des variables d'environnement par défaut <span style="font-size: 14px;">npm_config_*</span>
et
)
<span style="font-size: 14px;">npm install fuck-env<br></span>
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>
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>
执行 <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>
以后只需执行 <code><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 文件(计入版本库)中即可。
以上内容就是如何更好的管理前端环境变量的方法,希望对大家有帮助。
相关推荐:
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!