Detaillierte Erläuterung des ES6-Dateikompilierungsfalls mit Babel (mit Code)

Dieses Mal werde ich Ihnen den Fall der Kompilierung von Es6-Dateien durch Babel (mit Code) ausführlich erläutern. Das Folgende ist ein praktischer Fall ein Blick.

1.babeloffizielle Website von babel

2. Installation

npm i babel-cli -g

Verwenden Sie den obigen Befehl, um babel zu installieren, wobei i für „installieren“ und -g für „global installieren“ steht

3 , um die Datei es6.js zu erstellen

let num = [1,2,3,4]; 
let plusDouble = num.map(item => item * 2); 
console.log(plusDouble);

und dann den Befehl zum Kompilieren verwenden:

babel es6.js -o compiled.js

Dann erscheint die kompilierte Datei im aktuellen Verzeichnis Auf diese Weise haben wir den Kompilierungsprozess abgeschlossen, aber wenn wir die kompilierte Datei ausführen, wird immer noch ein Fehler gemeldet. Tatsächlich liegt der Hauptgrund darin, dass die obige Kompilierung keine Einschränkungen hinzugefügt hat, das heißt, sie hat Babel nicht mitgeteilt, wie Zum Kompilieren gehen wir wie folgt vor: Konfigurieren Sie babel

4. Konfiguration

(1) Konfigurieren Sie über die Datei

in das Projektverzeichnis. Erstellen Sie die Datei .babelrc und schreiben Sie den folgenden Code in die Datei: Da babel in Form eines Plug-Ins verwendet wird, installieren Sie das Plug-In, indem Sie die Objektvoreinstellung und das Plug-In

{ 
 "presets": [], 
 "plugins": [] 
}

im folgenden Code. Mit dem folgenden Plug-in können Sie ES6-Code in ES5-Code kompilieren:

npm i --save-dev babel-preset-es2015

(--save-dev im Code bedeutet installiert in lokalen Entwicklungsabhängigkeiten)

Ändern Sie dann die Datei in .babelrc in den folgenden Inhalt:

{ 
 "presets": ["es2015"], 
 "plugins": [] 
}

An diesem Punkt haben wir die Konfiguration abgeschlossen, um die folgenden Ergebnisse zu erhalten:

"use strict";  
var num = [1, 2, 3, 4]; 
var plusDouble = num.map(function (item) { 
 return item * 2; 
}); 
console.log(plusDouble);

Nach dem Ausführen , die Ergebnisse können normal gedruckt werden

Jetzt können wir mit der einfachen Kompilierung fortfahren, es gibt jedoch noch einige Einschränkungen für einige neue Funktionen in es7. Auf diese Weise verwenden wir Plug-Ins für die Kompilierung, wie unten gezeigt Objekt-Spreader-Plug-in

object

-rest-spread, ähnlich verwenden wir den Befehl, um

npm i babel-plugin-transform-object-rest-spread --save-dev

zu installieren und es auch im Plug-in

{ 
 "presets": ["es2015"], 
 "plugins": ["transform-object-rest-spread"] 
}

zu ändern und dann Testen Sie es über den Code. Schreiben Sie den folgenden Inhalt in den Code (... ist eine vorgefertigte Idee in ES7):

let courses = { name: 'english', score: 90}; 
courses = { ...courses, comment: 'A'}; 
console.log(courses);

Das Ergebnis nach der Kompilierung ist:

'use strict';  
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };  
var courses = { name: 'english', score: 90 }; 
courses = _extends({}, courses, { comment: 'A' }); 
console.log(courses);

Durch Hinzufügen von _extends-Methode zum Konvertieren des Objektexpanders, der laufende Code kann das Ergebnis normal ausgeben

(2) Durch Hinzufügen der _extends-Methode im Webpack

Laden Sie die Konfiguration anderer

Attribute

in die Konfigurationsdatei

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 verwenden Sie js, um die Anzahl der Seiten-Tags zu zählen

So entwickeln Sie ein Bestätigungscode-Passwort im WeChat-Miniprogramm Eingabefeldfunktion

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des ES6-Dateikompilierungsfalls mit Babel (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!