Bagaimanakah webpack menukar modul es6 kepada es5?

Kaedah konfigurasi: 1. Gunakan kaedah import untuk meletakkan kod ES6 ke dalam fail kod js yang dibungkus 2. Gunakan alat npm untuk memasang alat pemuat babel, sintaksnya ialah "npm install -D babel; -loader @babel/ core @babel/preset-env"; 3. Cipta fail konfigurasi ".babelrc" alat babel dan tetapkan peraturan transcoding; 4. Konfigurasikan peraturan pembungkusan dalam fail webpack.config.js.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

IE yang jahat masih perlu diisi dengan lubang selama beribu-ribu tahun

• Piawaian IE jauh berbeza daripada spesifikasi html/css dan juga js, jadi secara amnya Sebahagian besar daripada isu keserasian yang perlu diselesaikan adalah untuk menyelesaikan ketidakserasian IE Walaupun sintaks dan spesifikasi ES6 yang popular pada masa ini meninggalkan pertimbangan IE dan melepaskan rawatan IE secara lalai, keserasian IE adalah. masih menjadi masalah! Walaupun kadar penggunaan IE kurang daripada 1% daripada pasaran.
• Kami menggunakan spesifikasi ES6 yang selesa tetapi bagaimana jika saya mengalami sakit kepala? Webpack telah membangunkan fungsi penukaran pembungkusan yang sangat berkuasa: tukar kepada ES5!

Datang dengan mana-mana kod ES6

• Hanya tulis kenyataan let dan lintasi:

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

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

Ini adalah hasil dalam penyemak imbas Chrome

Ini adalah hasil dalam Firefox:

Ini adalah hasil daripada penyemak imbas ie11:

Tidak disangka-sangka sama sekali! Mari kita pusing.

• Di sini kita mula-mula membuat pengubahsuaian, menggunakan kaedah import untuk mengalihkan kod ES6 ke dalam fail kod js yang dibungkus:
  Original index.js:

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模块化知识

Tidak dapat mencari @babel/core Masalah

• Pemalam atau kit alatan yang dipasang sebelum ini diperlukan untuk pembungkusan:

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

• Ya, disebabkan oleh isu keserasian versi, versi 8.x terbaharu babel-loader telah menukar bacaan babel-core, jadi kami perlu memasang versi sepadan yang sepadan:

#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

• Saya menggunakan versi 7.x di sini:

• Buat fail konfigurasi alat babel: .babelrc, tetapkan peraturan transcoding

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

• peraturan pembungkusan konfigurasi webpack.config.js:

module: {
    rules: [{
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
    }]
}

• pak web dilaksanakan untuk menjana ujian.html

• Kesan penyemak imbas:

Chrome

IE

Kod tersebut berjaya dijalankan pada IE

• Mari kita lihat rupa es5 yang ditukar pakej

Penukaran daripada es6 kepada es5 berakhir di sini.

[Cadangan berkaitan: tutorial video javascript, Video pengaturcaraan]

Atas ialah kandungan terperinci Bagaimanakah webpack menukar modul es6 kepada es5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!