Heim > Artikel > Backend-Entwicklung > Bessere Möglichkeit, Front-End-Umgebungsvariablen zu verwalten

Bessere Möglichkeit, Front-End-Umgebungsvariablen zu verwalten

小云云Original: 2017-12-05 16:46:552037Durchsuche

In diesem Artikel werden hauptsächlich die Probleme analysiert, die bei der Verwendung von Umgebungsvariablen zur Verwaltung von Front-End-Projekten auftreten, und gängige Tools zur Bereitstellung von Lösungen vorgestellt.

So verwenden Sie Umgebungsvariablen

Beim Erstellen eines Front-End-Projekts basierend auf Webpack (oder Alle knotenbasierten Projekte (in diesem Artikel wird das Webpack-Projekt als Beispiel verwendet) müssen im Allgemeinen zwei Betriebsmodi bereitstellen: Entwicklungsmodus und Produktionsmodus. Die übliche Praxis besteht darin, die Umgebungsvariable <code>NODE_ENVNODE_ENV auf productionProduktionNODE_ENV=production webpack zu setzen B. das Ausführen des Befehls NODE_ENV=produktion webpackprocess.env.NODE_ENV === 'production' und das anschließende Übergeben von <code>npm startprocess.env.NODE_ENV im JavaScript code === 'produktion' um festzustellen, ob es sich um den Produktionsmodus handelt, andernfalls um den Entwicklungsmodus. Durch die Unterscheidung zwischen verschiedenen Modi können Sie unterschiedliche Vorgänge ausführen, z. B. das Starten eines Entwicklungsservers und Proxy-Weiterleitungs-APIs im Entwicklungsmodus oder das Komprimieren und Zusammenführen von Code im Produktionsmodus. Um die Front-End-Engineering-Befehle besser zu vereinheitlichen, können Sie die Befehle zum Starten des Entwicklungsmodus bzw. des Produktionsmodus zum Skriptfeld der Datei package.json hinzufügen. In Zukunft müssen Sie nur noch npm run build ausführen npm start code><code>PORT oder npm run buildPORT=8080 npm start. Die Notwendigkeit, im Projekt differenzielle Operationen durchzuführen, lässt sich gut durch die Definition von Umgebungsvariablen lösen. Wenn Sie von Mitgliedern definierte Umgebungsvariablen unterstützen möchten, verwenden Sie einfach zuerst den Wert in der Umgebungsvariablen im Programm. Wenn beispielsweise die Portnummer so festgelegt wurde, dass sie dem Wert von

PORT

in der Umgebungsvariablen Priorität einräumt, führen Projektmitglieder

PORT= beim Entwickeln. 8080 npm start

Der Befehl kann die Portnummer auf 8080 anpassen.

Probleme bei der Verwendung von Umgebungsvariablen

Die oben genannten Lösungen können auf die meisten Szenarien angewendet werden, sie können jedoch das Problem des Festlegens von Umgebungsvariablen nicht lösen . Plattformübergreifende und Persistenzprobleme

npm run buildPlattformübergreifendNODE_ENV=production webpackset NODE_ENV=production webpackWenn es Mitglieder gibt, die das Windows-Betriebssystem verwenden das Projekt, wenn npm run buildcross-env NODE_ENV=production webpack ausgeführt wird (d. h.

NODE_ENV=Production Webpack

) schlägt fehl, da Windows-Befehle das Festlegen von Umgebungsvariablen auf diese Weise nicht unterstützen. Obwohl Sie unter Windows auch manuell set NODE_ENV=produktionswebpack basierend auf dem Inhalt des Build-Skripts ausführen können, zerstört dies die ursprüngliche Absicht der Vereinheitlichung der Front -End-Engineering-Befehle Es muss eine Bibliothek eingeführt werden, um das Problem des plattformübergreifenden Festlegens von Umgebungsvariablen zu lösen. Wenn Sie Cross-Env verwenden, schreiben Sie einfach das Build-Skript in package.json um in

cross-env NODE_ENV=produktionswebpack und es funktioniert plattformübergreifend. PORT=8080 API_SERVER=192.168.100.100 API_PORT=9000 npm start

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

Persistenz

env-cmd --fallback ./.env.local webpackMit zunehmendem Umfang des Projekts kann die Anzahl der benutzerdefinierten Umgebungsvariablen für das Projekt zunehmen . viele. Beispielsweise müssen statische Ressourcen nach der Bereitstellung CDN verwenden und der Projektproduktionsmodus muss eine Umgebungsvariable bereitstellen, um das Feld publicPath des benutzerdefinierten Webpacks zu unterstützen. Beispielsweise führen einige Mitglieder den API-Server nicht lokal aus, sondern in einem Virtuelle Maschine. Oder auf einem anderen Computer muss der Projektentwicklungsmodus zwei Umgebungsvariablen bereitstellen, um die benutzerdefinierte API-Serveradresse und Portnummer zu unterstützen ... Einige Mitglieder müssen möglicherweise bei jeder Entwicklung einen langen Befehl wie diesen ausführen:

PORT=8080 API_SERVER=192.168.100.100 API_PORT=9000 npm start, daher benötigen Sie ein Tool, das Umgebungsvariablen wie dotenv oder env-cmd beibehalten kann. Am Beispiel von env-cmd müssen Sie lediglich eine .env.local-Datei erstellen (nicht in der Versionsverwaltung enthalten) und schreiben: Schreiben Sie den Startbefehl im Paket neu .json (Der Build-Befehl ist ähnlich) als env-cmd --fallback ./.env.local webpack, um das Problem zu vieler benutzerdefinierter Anforderungen zu lösen Umgebungsvariablen und geben Sie sie jedes Mal manuell ein. Triviale Fragen.

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

管理环境变量有很多工具，下面简单分析一下常用工具 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>

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

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

Wenn zu viele Umgebungsvariablen vorhanden sind, wird auch das Konfigurationsfeld, das alle package.json enthält, aufgebläht angezeigt. Fuck-env unterstützt die einheitliche Verwaltung von Standardumgebungsvariablen. Verschieben Sie einfach alle Umgebungsvariablen unter dem Konfigurationsfeld in die Datei default.env (in der Versionsbibliothek enthalten).

Weitere Beispiele finden Sie hier

fuck-env ist bestrebt, verschiedene Probleme zu lösen, auf die Benutzer bei der Verwaltung von Umgebungsvariablen stoßen. Es befindet sich im Beta-Stadium und in Zukunft werden benutzerfreundlichere Designs hinzugefügt. Wenn Sie Ideen haben, können Sie gerne wertvolle Vorschläge zum Projekt machen.

Ursprüngliche Adresse: https://lon.im/post/use-envir...

So verwenden Sie Umgebungsvariablen

Beim Erstellen eines Front-End-Projekts auf Basis von Webpack (oder eines anderen auf Node basierenden Projekts) dauert dieser Artikel das Webpack-Projekt als Beispiel), müssen im Allgemeinen zwei Betriebsmodi bereitstellen: Entwicklungsmodus und Produktionsmodus. Die übliche Praxis besteht darin, die Umgebungsvariable <code>NODE_ENVNODE_ENV auf productionProduktionNODE_ENV=production webpack zu setzen B. das Ausführen des Befehls NODE_ENV=produktion webpackprocess.env.NODE_ENV === 'production' und das anschließende Übergeben von <code>npm startprocess.env.NODE_ENV im JavaScript code === 'produktion' um festzustellen, ob es sich um den Produktionsmodus handelt, andernfalls um den Entwicklungsmodus. Durch die Unterscheidung zwischen verschiedenen Modi können Sie unterschiedliche Vorgänge ausführen, z. B. das Starten eines Entwicklungsservers und Proxy-Weiterleitungs-APIs im Entwicklungsmodus oder das Komprimieren und Zusammenführen von Code im Produktionsmodus. Um die Front-End-Engineering-Befehle besser zu vereinheitlichen, können Sie die Befehle zum Starten des Entwicklungsmodus bzw. des Produktionsmodus zum Skriptfeld der Datei package.json hinzufügen. In Zukunft müssen Sie nur noch npm run build ausführen npm start code><code>PORT oder npm run buildPORT=8080 npm start. Die Notwendigkeit, im Projekt differenzielle Operationen durchzuführen, lässt sich gut durch die Definition von Umgebungsvariablen lösen. Wenn Sie von Mitgliedern definierte Umgebungsvariablen unterstützen möchten, verwenden Sie einfach zuerst den Wert in der Umgebungsvariablen im Programm. Wenn beispielsweise die Portnummer so eingestellt wurde, dass sie dem Wert von

PORT

in der Umgebungsvariablen Priorität einräumt, führen Projektmitglieder

PORT= beim Entwickeln. 8080 npm start

Der Befehl kann die Portnummer auf 8080 anpassen.

Probleme bei der Verwendung von Umgebungsvariablen

NODE_ENV=Production Webpack

cross-env NODE_ENV=produktionswebpack und es funktioniert plattformübergreifend. Beharrlichkeit

Mit zunehmender Skalierung kann die Anzahl der benutzerdefinierten Umgebungsvariablen für das Projekt zunehmen. Beispielsweise müssen statische Ressourcen nach der Bereitstellung CDN verwenden und der Projektproduktionsmodus muss eine Umgebungsvariable bereitstellen, um das Feld publicPath des benutzerdefinierten Webpacks zu unterstützen. Beispielsweise führen einige Mitglieder den API-Server nicht lokal aus, sondern in einem Virtuelle Maschine. Oder auf einem anderen Computer muss der Projektentwicklungsmodus zwei Umgebungsvariablen bereitstellen, um die benutzerdefinierte API-Serveradresse und Portnummer zu unterstützen ... Einige Mitglieder müssen möglicherweise bei jeder Entwicklung einen langen Befehl wie diesen ausführen: 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, daher benötigen Sie ein Tool, das Umgebungsvariablen wie dotenv oder env-cmd beibehalten kann. Am Beispiel von env-cmd müssen Sie lediglich eine .env.local-Datei erstellen (nicht in der Versionsverwaltung enthalten) und schreiben:

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

Schreiben Sie den Startbefehl im Paket neu .json (Der Build-Befehl ist ähnlich) als env-cmd --fallback ./.env.local webpackenv-cmd --fallback ./.env.local webpack

, um das Problem zu vieler benutzerdefinierter Anforderungen zu lösen Umgebungsvariablen und geben Sie sie jedes Mal manuell ein. Triviale Fragen.

Ein wirklich nützliches Tool zur Verwaltung von Umgebungsvariablen

Es gibt viele Tools zum Verwalten von Umgebungsvariablen. Lassen Sie uns kurz die häufig verwendeten Tools dotenv und cross analysieren -env. Vor- und Nachteile von und env-cmd:

dotenv kann plattformübergreifende und Persistenzprobleme lösen, seine Verwendungsszenarien sind jedoch begrenzt und nur anwendbar an Knotenprojekte, und der Projektcode ist stark gekoppelt und muss nach der Ausführung des Knotencodes manuell ausgelöst werden
cross-env unterstützt das Anpassen von Umgebungsvariablen die Befehlszeile. Das Problem ist auch sehr offensichtlich. Es kann das Persistenzproblem benutzerdefinierter Umgebungsvariablen in großen Projekten nicht lösen.
env-cmd kann auch das plattformübergreifende Problem lösen und Persistenz. Der Nachteil besteht darin, dass das Anpassen von Umgebungsvariablen in der Befehlszeile nicht unterstützt wird.

npm config set project-name:PORT 8080Tatsächlich bietet es auch NPM Ähnliche Einstellungen für Projektumgebungsvariablen. Wenn Sie die obige Anforderung für benutzerdefinierte Portnummern als Beispiel nehmen, können Sie auch npm config set project-name:PORT 8080<code>npm start(project-name is the) ausführen Projektname), nachdem Sie process.env.npm_package_config_PORTnpm start ausgeführt haben, können Sie {"PORT": 8000}process.env.npm_package_config_PORT im übergeben Code npm_package_config_PORT Holen Sie sich 8080. Und Sie können das Konfigurationsfeld in package.json auch auf {"PORT": 8000}npm_package_config_ setzen, um

anzugeben Standardwert für npm_package_config_PORT

. Der größte Vorteil der Verwendung der NPM-Konfigurationsfunktion zum Verwalten von Umgebungsvariablen ist die native Unterstützung. Die im Paket.json-Konfigurationsfeld platzierten Standardumgebungsvariablen sind ebenfalls sehr praktisch. Leider haben Variablennamen lange

npm_package_config_

; das Skript muss über das Feld „scripts“ von package.json ausgeführt werden (d. h. führen Sie „npm run your_script_name“ aus). ; Außerdem teilen sich alle Projekte eine Konfigurationsdatei (.npmrc, standardmäßig im Benutzerverzeichnis), was für die manuelle Bearbeitung und Anzeige unpraktisch ist.
Daher sollte ein nützliches Front-End-Tool zur Verwaltung von Umgebungsvariablen die folgenden Funktionen haben:
Unterstützung der Befehlszeile Umgebungsvariablen festlegen
Plattformübergreifend
Persistenz, es ist am besten, eine bereitzustellen Einstellung für die lokale Umgebung Das Befehlszeilentool für Variablen
npm_package_* unterstützt das Festlegen von Standardumgebungsvariablen npm_config_*
unterstützt das Abrufen von von NPM bereitgestellten Umgebungsvariablen (

npm_package_*

und

npm_config_*

)

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

Aus diesem Grund wurde ein weiteres Tool zur Verwaltung von Umgebungsvariablen geboren: Fuck-env, was „gefälschte Umgebungsvariablen“ bedeutet und alle oben genannten Funktionen unterstützt .

fuck-env Installieren und verwenden Sie

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

Wenn es eines gibt, das package.json und main enthält. js Für ein Projekt mit zwei Dateien lautet der Dateicode wie folgt:

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>

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

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

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

In Verbindung stehende Artikel

Mehr sehen