Wie konvertiert Webpack das ES6-Modul in das ES5-Modul?

Konfigurationsmethode: 1. Verwenden Sie die Importmethode, um den ES6-Code in die gepackte JS-Codedatei einzufügen. 2. Verwenden Sie das NPM-Tool, um das Babel-Loader-Tool zu installieren. Die Syntax lautet „npm install -D babel-loader @babel“. /core @babel/preset-env“; 3. Erstellen Sie die Konfigurationsdatei „.babelrc“ des Babel-Tools und legen Sie die Transkodierungsregeln fest; 4. Konfigurieren Sie die Verpackungsregeln in der Datei webpack.config.js.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Der böse IE muss seit Tausenden von Jahren immer noch mit Lücken gefüllt werden

• IE-Standards unterscheiden sich stark von den Spezifikationen von HTML/CSS und sogar JS. Daher sind viele Kompatibilitätsprobleme erforderlich Die Lösung besteht im Allgemeinen darin, die Inkompatibilität des IE zu lösen. Obwohl die derzeit beliebte ES6-Syntax und -Spezifikation die IE-Überlegungen aufgibt und die standardmäßige Behandlung des IE aufgibt, ist die IE-Kompatibilität immer noch ein Problem! Auch wenn die Nutzungsrate des IE weniger als 1 % des Marktes ausmacht.
• Wir verwenden die komfortable ES6-Spezifikation, aber das bereitet dem IE Kopfschmerzen. Was sollen wir tun? Webpack hat eine sehr leistungsstarke Verpackungskonvertierungsfunktion entwickelt: Konvertieren in ES5!

Kommen Sie mit einem beliebigen ES6-Code

• Schreiben Sie einfach eine let-Anweisung und durchlaufen Sie:

console.log("webpack 1");
let date = ["hello", "world", "this", "is", "es6", "code"];

((theDate) => {
    theDate.forEach(item => console.log(item));
})(date)

Dies ist das Ergebnis im Chrome-Browser

Dies ist das Ergebnis im Firefox-Browser:

Das ist das Ergebnis des ie11-Browsers:

Es ist überhaupt nicht überraschend! Machen wir eine Spritztour. 🔜 Die für die vorherige Installation und Paketierung erforderlichen Plug-Ins oder Toolkits:

console.log("webpack 1");
let fun = () => {
    let date = ["hello", "world", "this", "is", "es6", "code"];
    date.forEach(item => console.log(item));
}
//fun() //结果依然刚才一样
export default fun;//es6导出函数，es6模块化知识

Ja, aufgrund von Versionskompatibilitätsproblemen hat die neueste 8.x-Version von babel-loader die Lesart von babel-core geändert, daher müssen wir sie installieren die entsprechende passende Version:

npm install babel-core babel-loader babel-preset-es2015 --save-dev
#因为是开发测试环境，就加了dev，各自根据需要更改保存参数

Was ich hier verwende, sind die 7. js-Konfigurationsverpackungsregeln:

#webpack 4.x | babel-loader 8.x | babel 7.x 最新版本
npm install -D babel-loader @babel/core @babel/preset-env
#webpack 4.x | babel-loader 7.x | babel 6.x 版本
npm install -D babel-loader@7 babel-core babel-preset-env webpack

Webpack-Ausführung, test.html generieren

Browsereffekt:

• Chrome-Code .babelrc
Die Konvertierung von es6 bis es5 ist vorbei.

【Verwandte Empfehlungen: Javascript-Video-Tutorial

,

Programmiervideo
• 】

Das obige ist der detaillierte Inhalt vonWie konvertiert Webpack das ES6-Modul in das ES5-Modul?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!