Das Einrichten von Babel zum Kompilieren von es6 + -Javascript-Codes in eine abwärtskompatible Version von JavaScript in aktuellen und älteren Browsern oder Umgebungen ist wahrscheinlich das einfachste, was mir als Benutzer begegnet ist entwickler. Ich habe jedoch einige Zeit gebraucht, um dies zu erkennen, und das lag an der Tatsache, dass Babel nicht nur ein Paket ist, das Sie in Ihr Projekt einfügen und das abgespielt wird, sondern dass Sie tatsächlich mehrere Pakete zusammenstellen müssen, um es zum Laufen zu bringen die richtigen Pakete zu wählen kann verwirrend sein. In diesem Blogbeitrag würde ich erklären, wie Sie Babel einrichten können, um Ihre es6-, es7-, es8-usw.-Javascript-Codes in Versionen von Javascript zu kompilieren, die in der NodeJS-Laufzeit fehlerfrei ausgeführt werden können.

Wie ich bereits sagte, Babel zum Laufen zu bringen, beinhaltet ein paar Pakete von npm , also fangen wir an. Das erste Paket, das wir installieren würden, ist babel-core . Dies ist die Babel-Engine, aber sie kann selbst nichts tun, sie benötigt einige andere Pakete, um sie zu unterstützen.

Führen Sie npm install @babel/core --save aus, um babel-core zu installieren

Das zweite Paket, das wir installieren würden, ist das babel-cli. Dieses Paket stellt sicher, dass wir Babel über die Befehlszeile verwenden können, und da wir in einer Knotenumgebung arbeiten, sollten wir dies auf jeden Fall benötigen.

Führen Sie npm install @babel/cli --save aus, um babel-cli zu installieren

Möglicherweise möchten Sie ein Babel-Skript in den Skriptabschnitt Ihres package.json wie folgt einfügen:

"scripts": {
... "babel": "./node_modules/.bin/babel",
...}

Dies würde uns helfen, lange und verwirrende Befehle nicht jedes Mal in die Befehlszeilenschnittstelle einzugeben, wenn wir kompilieren möchten.

Testing

Nun, mit diesen beiden Paketen können wir tatsächlich etwas mit Babel machen, nur um zu fühlen, was Babel ist, jedoch würde noch keine Transformation stattfinden.

Erstellen Sie eine test.js Datei und schreiben Sie einige JavaScript es6-Codes hinein, dann gehen Sie zur Befehlszeile und führen Sie

npm run babel test.js -- --out-file compiledTest.js

Sie sollten eine neue compiledTest.js Datei sehen und diese Datei würde genau das Gleiche enthalten, was Sie in der test.js, es ist also kein Kompilieren aufgetreten, aber Babel funktioniert.

Der Befehl, den wir oben ausgeführt haben, weist Babel einfach an, die test.js -Datei in eine Ausgabedatei mit dem Namen compiledTest.js zu kompilieren. Wenn Sie Dateien in einem Verzeichnis kompilieren müssen, tun Sie einfach:

npm run babel ./path/to/sourceCodes --out-dir ./path/to/destination

Um Babel zum eigentlichen Kompilieren zu bringen, müssen wir einige Plugins installieren, um den Babel-Core zu unterstützen. Die Wahrheit ist, dass Babel selbst nichts tut, sondern installierte Plugins verwendet, um seine Magie auszuführen. Damit wir es6+ -Codes kompilieren können, sollten wir die env Voreinstellung

Ausführen npm install @babel/preset-env --save um die env Voreinstellung

Warte, habe ich nicht gesagt, dass Babel Plugins braucht, also was zum Teufel ist voreingestellt? Nun, ein Preset ist nur eine Gruppe von Plugins, also habe ich Recht, Babel braucht ein Plugin oder pluginS.
Das env Preset ist eine Gruppe von Plugins, mit denen moderne / zukünftige Versionen von JavaScript (ES2015, ES2016 usw.) kompiliert werden können.) in eine aktuell unterstützte Version von Javascript.

Nach der Installation dieses Pakets müssen wir Babel mitteilen,

Hey, ich habe gerade eine Reihe von Plugins installiert, die Sie für meine Kompilierung verwenden sollen.

Wir würden dies tun, indem wir eine .babelrc -Datei erstellen und diese Datei würde dieses Snippet enthalten

{
"presets" : 
}

Gehen Sie nun zur Befehlszeile und versuchen Sie erneut, unsere test.js -Datei zu kompilieren.

Wenn die compiledTest.js -Datei die es5-Version des test.js enthält, nachdem die Kompilierung abgeschlossen ist, ist es das; Wir haben gerade Babel eingerichtet, aber wenn nicht, möchten Sie vielleicht überprüfen, ob von Anfang an alles gut gelaufen ist.

Nur zur Bestätigung sollte Ihre Dateistruktur ungefähr so aussehen:

|- node_modules
|- package.json
|- test.js
|- compiledTest.js
|- .babelrc

Im laufenden Betrieb kompilieren

Manchmal möchten Sie nicht alle Ihre Codes zuerst kompilieren, bevor Sie sie ausführen. Um dies zu erreichen, sollten Sie den Befehl babel-node verwenden. Dieser Befehl wird mit dem Paket babel-cli geliefert und ist wie ein Ersatz für den Befehl node . Anstatt also so etwas zu tun node ./path/to/file , um Ihre Datei auszuführen, würden Sie babel-node ./path/to/file , um die Datei gleichzeitig zu kompilieren und auszuführen.

Beachten Sie, dass sich der babel-Knoten standardmäßig nicht in Ihrer Befehlszeile befindet, sodass Sie möglicherweise den Skriptabschnitt Ihres package.json ändern müssen, um

"scripts": {
..."babel-node": "./node_modules/.bin/babel-node",
...}

einzuschließen Und Ihre Datei wie folgt auszuführen:

npm run babel-node ./path/to/file

Fazit

Ich habe diesen Blogbeitrag mit babel-core in Version 7.2.0 geschrieben / aktualisiert, wenn Sie herausfinden, dass Babel in einigen höheren Versionen einige wichtige Änderungen am Einrichtungsprozess vorgenommen hat, können Sie es mich wissen lassen ([email protected] ), damit ich diesen Blogbeitrag aktualisieren würde, danke.