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. Installationnpm i babel-cli -g
3 , um die Datei es6.js zu erstellen
let num = [1,2,3,4]; let plusDouble = num.map(item => item * 2); console.log(plusDouble);
babel es6.js -o compiled.js
(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": [] }
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"]
}
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 andererAttribute
in die KonfigurationsdateiIch 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ählenSo 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!