vue konfigurasi perancah es6 hingga es5

Dengan perkembangan pesat teknologi hadapan, ES6 telah menjadi salah satu bahasa arus perdana​​untuk pembangunan bahagian hadapan. Walau bagaimanapun, dalam pembangunan sebenar, kami masih perlu mempertimbangkan isu keserasian, kerana pelayar yang berbeza mempunyai tahap sokongan yang berbeza untuk ES6. Untuk menyelesaikan masalah ini, kita perlu menukar kod ES6 kepada kod ES5. Artikel ini akan memperkenalkan cara mengkonfigurasi alat ES6 kepada ES5 dalam projek Vue.

1. Prasyarat

Sebelum memulakan konfigurasi, anda perlu memasang perisian berikut:

• Node.js
• npm

2. Pasang Babel

Babel ialah penyusun JavaScript yang digunakan secara meluas yang menukarkan kod ES6 kepada kod ES5. Menggunakan Babel dalam projek Vue memerlukan pemasangan dua kebergantungan:

npm install babel-core babel-loader --save-dev

• babel-core ialah modul teras Babel, yang menyediakan fungsi menukar kod.
• pemuat babel ialah pemuat yang digunakan oleh Webpack untuk mengendalikan Babel.

3. Mengkonfigurasi Babel

Dalam projek Vue, fail konfigurasi Babel ialah .babelrc. Kami perlu menambah peraturan penukaran dalam fail ini:

{
  "presets": ["env"]
}

Kod ini bermakna kami menggunakan pratetap env untuk menukar kod. Pratetap env menjana peraturan penukaran yang berbeza berdasarkan pelayar sasaran untuk menukar kod ES6 kepada ES5.

Memandangkan kami telah memasang babel-preset-env secara lalai, kami tidak perlu memasang pratetap ini lagi.

4. Mengkonfigurasi Pek Web

Dalam projek Vue, Webpack ialah alat yang digunakan untuk membina dan membungkus kod. Kami perlu menambah sokongan Babel dalam fail konfigurasi Webpack.

Buka webpack.base.conf.js dan tambah peraturan berikut dalam module.rules:

{
    test: /.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['env']
        }
    }
}

Dalam peraturan ini, kami memberitahu Webpack untuk menggunakan transformasi Babel untuk semua fail .js, tetapi kecualikan Alih keluar folder node_modules dan bower_components. Pada masa yang sama, kami menetapkan untuk menggunakan pratetap env untuk menukar kod. Peraturan ini akan menukar ES6 kepada ES5.

5. Uji fungsi penukaran

Kami boleh mencipta modul ES6 untuk menguji fungsi penukaran. Sebagai contoh, dalam folder src, cipta fail bernama test.js yang mengandungi kod berikut:

const greeting = "Hello";
const name = "World";
console.log(`${greeting}, ${name}!`);

Kemudian, perkenalkan modul ini dalam fail main.js:

import './test.js';

Akhir sekali, Jalankan npm jalankan dev dan buka konsol untuk melihat output Anda boleh melihat bahawa output ialah:

Hello, World!

Ini membuktikan bahawa kod kami telah berjaya ditukar kepada ES5.

6. Konfigurasi lanjutan

Jika anda ingin mengkonfigurasi Babel dengan lebih fleksibel dan berhati-hati, anda boleh menggunakan kaedah berikut:

• Dalam . fail babelrc Tambah pratetap atau pemalam lain.
• Konfigurasikan pilihan dalam fail .babelrc untuk mengawal tingkah laku penukaran Babel. Sebagai contoh, anda boleh menukar ES6 kepada mod longgar ES5 dengan menetapkan pilihan longgar.
• Tambahkan peraturan tambahan dalam fail webpack.base.conf.js untuk mengendalikan lebih banyak jenis fail. Contohnya, jika anda mempunyai komponen fail tunggal Vue dalam projek anda, anda boleh mengendalikannya dengan menambahkan peraturan pemuat vue.

7. Kesimpulan

Mengkonfigurasi alatan penukaran ES6 kepada ES5 dalam projek Vue boleh membantu kami menyelesaikan isu keserasian penyemak imbas dan membolehkan kami menulis pemodenan kod JavaScript dengan lebih mudah. Menggunakan petua konfigurasi ini untuk Babel dan Webpack boleh memberikan fungsi yang lebih berkuasa dan fleksibiliti yang lebih besar. Kami berharap anda boleh mempelajari pengetahuan berguna daripada artikel ini untuk membina projek Vue yang lebih baik.

Atas ialah kandungan terperinci vue konfigurasi perancah es6 hingga es5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!