Warum es6 in es5 konvertieren?

Grund: Aus Gründen der Browserkompatibilität und zur reibungslosen Ausführung der Anwendung in der node.js-Umgebung. Als neue Spezifikation für JS fügt ES6 viele neue Syntax und APIs hinzu, aber moderne Browser bieten keine umfassende Unterstützung für die neuen Funktionen von ES6, sodass Sie nur ES6-Code in ES5-Code konvertieren müssen Konfigurieren Sie das Babel-Tool im Projekt. Das ist es.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Warum es6 in es5 konvertieren?

Die einfache Antwort lautet: für Browserkompatibilität und eine reibungslose Ausführung der Anwendung in der node.js-Umgebung.

ES6, als neue Spezifikation von JS, fügt viele neue Syntax und APIs hinzu, aber nicht alle Browser auf dem Markt sind kompatibel, daher ist es notwendig, den ES6-Syntaxcode in ES5-Code zu konvertieren.

Moderne Browser bieten keine hohe Unterstützung für die neuen Funktionen von ES6. Wenn Sie also die neuen Funktionen von ES6 direkt im Browser nutzen möchten, müssen Sie andere Tools verwenden.

In der node.js-Umgebung wurde die Unterstützung von node für ES6 kritisiert. Nach Version 13 wurde der Modulmodus eingeführt (fügen Sie einen Satz in package.json hinzu: „type“: „module“), aber einige Bibliotheken behalten die ES6-Syntax bei wird nicht unterstützt. Wenn Ihr node.js-Programm die ES6-Syntax daher nicht erkennt, verwenden Sie bitte Babel zum Transkodieren, wodurch das Problem möglicherweise gelöst wird.

Wie konvertiere ich es6 in es5?

Verwenden Sie Babel, um es6 in es5 zu konvertieren.

Im Folgenden beschreiben wir den Prozess der Verwendung von Babel in der Befehlszeile, damit Sie den gesamten Übersetzungsprozess verstehen können.

1. Installieren Sie das Befehlszeilentool von Babel im Projekt.

npm install -D babel-cli

. 2. Bereiten Sie den ES6-Code vor. Normalerweise legen wir den Quellcode im src-Verzeichnis ab Legen Sie es in src ab. Erstellen Sie eines im Verzeichnis:

// src/example.js
class Hello {
  static world() {
    console.log('Hello, World!');
  }
}
Hello.world();

3. Konfigurieren Sie Babel

Babel transpiliert Code über Plug-Ins und Voreinstellungen (damit es nicht nur ES6 übersetzen kann). Um ES6 in ES5 zu übersetzen, müssen wir nur den env-Standardwert konfigurieren:

npm install -D babel-preset-env

Wir benötigen außerdem eine Konfigurationsdatei im Projektstammverzeichnis: .babelrc mit folgendem Inhalt:

// .babelrc
{
  "presets": ["env"]
}

4. NPM-Befehl erstellen

Dieser Schritt ist nicht erforderlich, da er bereits konfiguriert wurde. Sie können den Befehl direkt ausführen:

babel src -d build

Dadurch wird der Javascript-Code im src-Verzeichnis in ES5 übersetzt und gespeichert im Build-Verzeichnis Down. Herkömmlicherweise fügen wir die Tür-zu-Tür-Befehle in den npm-Befehl ein. Geben Sie in der package.json des Projekts den folgenden Inhalt ein:

"scripts": {
  "build": "babel src -d build",
},

Auf diese Weise können Sie den folgenden Befehl verwenden, um ES6-Code zu übersetzen:

npm run build

[Verwandte Empfehlungen:

Javascript-Video-Tutorial

,

Web-Frontend

]

Das obige ist der detaillierte Inhalt vonWarum es6 in es5 konvertieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!