Heim > Web-Frontend > js-Tutorial > Hauptteil

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

php中世界最好的语言
Freigeben: 2018-05-31 14:41:03
Original
1383 Leute haben es durchsucht

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
Nach dem Login kopieren
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);
Nach dem Login kopieren
und dann den Befehl zum Kompilieren verwenden:

babel es6.js -o compiled.js
Nach dem Login kopieren
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": [] 
}
Nach dem Login kopieren
im folgenden Code. Mit dem folgenden Plug-in können Sie ES6-Code in ES5-Code kompilieren:
npm i --save-dev babel-preset-es2015
Nach dem Login kopieren

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

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

{ 
 "presets": ["es2015"], 
 "plugins": [] 
}
Nach dem Login kopieren

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 Login kopieren

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
Nach dem Login kopieren

zu installieren und es auch im Plug-in

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);
Nach dem Login kopieren

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);
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage