So verwenden Sie Babel zum Konvertieren von ES6 in ES5 in Webstorm

Dieses Mal zeige ich Ihnen, wie Sie Babel in Webstorm zum Konvertieren von ES6 in ES5 verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Babel in Webstorm zum Konvertieren von ES6 in ES5 gelten Schauen Sie mal rein. Schauen Sie mal rein.

Vorwort: ECMAScript 6 ist der Standard der nächsten Generation der JavaScript-Sprache, der im Juni 2015 offiziell veröffentlicht wurde. Mozilla wird JavaScript basierend auf diesem Standard starten 2,0. Das Ziel von ES6 besteht darin, die Verwendung der JavaScript-Sprache zum Schreiben großer und komplexer Anwendungen zu ermöglichen und eine Entwicklungssprache auf Unternehmensebene zu werden. Allerdings bieten moderne Browser 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.

Heute werde ich Ihnen zeigen, wie Sie Webstorm so konfigurieren, dass es Babel verwendet, um ES6 automatisch in ES5 zu transkodieren. Babel ist ein weit verbreiteter Transcoder, der ES6-Code perfekt in ES5-Code konvertieren kann, sodass wir ES6-Funktionen in unseren Projekten verwenden können, ohne auf Browserunterstützung warten zu müssen.

1. Erstellen Sie ein neues leeres Projekt in Webstorm und nennen Sie es es6demo.

2. Erstellen Sie dann eine neue package.json im Stammverzeichnis und müssen nur zwei Attribute angeben, nämlich Name und Version.

3. Öffnen Sie das Webstorm-Terminal (Terminal). Die Tastenkombination lautet Alt+F12, Installieren babel-cli. Es kann auch global installiert werden.

babel-cli installieren: npm install --save-dev babel-cli

4. Nach der Installation von babel-cli können Sie sehen, dass eine Datei node_modules und eine Datei package-lock.json neu generiert werden. Gleichzeitig wird festgestellt, dass es eine zusätzliche Datei

"devDependencies": {
"babel-cli": "^6.26.0"
}

5. Wählen Sie dann unter Einstellungen->Sprachen und Frameworks die Option Javascript aus und wählen Sie die Versionsversion als ECMAScript6 aus.

6. Installieren Sie im Webstorm-Terminal die Voreinstellung von Babel, um den ES6-Code korrekt zu identifizieren. Der Befehl lautet wie folgt:

Nach der Installation befinden sich weitere

npm install --save-dev babel-preset-es2015

in der Datei package.json. „babel-preset-es2015“: „^6.24.1“ Diese Codezeile zeigt an, dass babel-preset-es2015 ebenfalls erfolgreich installiert wurde.

7. Erstellen Sie im Stammverzeichnis eine neue Datei mit dem Namen .babelrc und folgendem Inhalt:

8. Richten Sie File Watcher ein.

{
 "presets": [
  "es2015"
 ]
}

9. Erstellen Sie eine Datei mit dem Namen test.js und schreiben Sie die es6-Syntax hinein, damit keine Fehler gemeldet werden. test-compiled.js ist eine in es5 kompilierte Datei und der Standardwert ist der strikte Modus.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So fügen Sie in Axios einen Fortschrittsbalken zu hochgeladenen Bildern hinzu

So optimieren Sie die JSON-Daten Gruppierung von JS

JS führt TXT-Text aus, um Inhalte an der angegebenen Position einzufügen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Babel zum Konvertieren von ES6 in ES5 in Webstorm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!