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

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

{ 
 "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

-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

Attribute

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 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!