So installieren Sie Babel mit NPM in VSCode

Vorwort

Im vorherigen Artikel wurde die Installation und Konfiguration von nodejs vorgestellt. Dieser Artikel beschreibt die Verwendung von bable in VScode.
bable ist ein weit verbreiteter ES6-Konverter, der ES6-Code in ES5-Code konvertieren kann

1. Überprüfen Sie, ob npm bereits installiert ist

Geben Sie npm -v in cmd ein, um die Versionsnummer zu erhalten. Jetzt hat die neue Version von nodejs npm während der Installation automatisch installiert.

Auch hier ist es am besten, das Terminal als Administrator zu öffnen.

2. Konfigurieren Sie bable

Installieren Sie Babel im Terminal und geben Sie npm install –g babel-cli ein.

Damit kann VScode bable erkennen. Nach erfolgreicher Installation sieht es folgendermaßen aus:

Dieser Vorgang ist sehr langsam, bitte haben Sie Geduld.

3. In VScode konfigurieren

1. Verwenden Sie vscode ctrl+j, um das integrierte Terminal von vscode zu öffnen
2. Geben Sie den Zielordner ein (mit dem Befehl cd)

Eigentlich sollte der zweite Schritt der oben beschriebenen Bable-Konfiguration auch im VScode-Terminal durchgeführt werden, aber ich habe es mehrmals versucht und es ist fehlgeschlagen, also habe ich es einfach in einem externen Terminal konfiguriert.

3. Geben Sie npm init –y im Terminal ein, um das Projekt zu initialisieren. Das richtige Ergebnis ist, dass eine Datei package.json im Ordner bable angezeigt wird.

4. Installieren Sie bable
Geben Sie npm install -–save-dev babel-preset-es2015 babel-cli in das Terminal ein.

Auch dieser Vorgang ist recht langwierig.

Da wir den Taobao-Spiegel bereits installiert haben, können wir auch cnmp verwenden, da nmp möglicherweise fehlschlägt, aber es kann zu folgender Situation kommen:

Ich verwende cnmp -v um die Versionsnummer als Demonstration abzufragen

Beim Ausführen von cnmp im vscode-Terminal ist ein Fehler aufgetreten. Führen Sie zu diesem Zeitpunkt einfach im Terminal aus: set-ExecutionPolicy RemoteSigned

Jetzt können Sie cnmp normal verwenden.
Der Code lautet wie folgt (Beispiel):

5. Erstellen Sie eine neue .babelrc-Datei und konfigurieren Sie den Inhalt der Konfigurationsdatei

{
    // Die Presets-Eigenschaft teilt Bakel mit, welche neuen Syntaxfunktionen im zu konvertierenden Quellcode verwendet werden // Konvertiere js nach es2015
    "Voreinstellungen":["es2015"],
    // Diese Eigenschaft teilt Bable mit, welche Plugins verwendet werden sollen. // Diese Plugins können steuern, wie Code „Plugins“ konvertiert wird: []
}

6. Dateikonvertierung Erstellen Sie eine neue js-Datei, geben Sie Inhalte ein (im es6-Format) und konvertieren Sie sie dann im Terminal
babel src/index.js –o dist/index.js
Hier verwende ich test.js->demo.js, um eine kleine Demonstration zu machen

Nach Eingabe des Befehls wird im Ordner automatisch eine konvertierte demo.js-Datei generiert, die den in es5 konvertierten es6-Code in test.js enthält

Mit diesem Statement kann eine einzelne Datei konvertiert werden. Analog dazu erfolgt auch eine direkte Konvertierung aller js-Dateien im gesamten Ordner:

babel src –d dis //src-source-Ordner dis-konvertierter Ordner

Es gibt auch Anweisungen, die eine Echtzeitkonvertierung erreichen können

babel src/index.js –w –o dist/index.js
babel src –w –d dist

Dies ist das Ende dieses Artikels über die Verwendung von npm zur Installation von Babel in vscode. Weitere Informationen zur Installation von Babel in vscode finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!