Mengapa menukar es6 kepada es5

Sebab: Untuk keserasian penyemak imbas dan untuk menjalankan aplikasi dengan lancar dalam persekitaran node.js. Sebagai spesifikasi baharu untuk JS, ES6 menambah banyak sintaks dan API baharu, tetapi penyemak imbas moden tidak mempunyai sokongan tinggi untuk ciri baharu ES6, jadi anda perlu menukar kod ES6 kepada kod ES5; konfigurasikan alat Babel dalam projek Itu sahaja.

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

Mengapa menukar es6 kepada es5?

Jawapan mudahnya ialah: untuk keserasian penyemak imbas dan untuk menjalankan aplikasi yang lancar dalam persekitaran node.js.

ES6, sebagai spesifikasi baharu JS, menambah banyak sintaks dan API baharu, tetapi tidak semua penyemak imbas di pasaran serasi, jadi kod sintaks ES6 perlu ditukar kepada kod ES5.

Pelayar moden tidak mempunyai sokongan tinggi untuk ciri baharu ES6, jadi jika anda ingin menggunakan ciri baharu ES6 secara langsung dalam penyemak imbas, anda perlu menggunakan alat lain.

Dalam persekitaran node.js, sokongan nod untuk ES6 telah dikritik selepas versi 13 mod modul diperkenalkan (tambah ayat: "type": "module" pada package.json) . Tetapi sesetengah perpustakaan masih tidak menyokong sintaks ES6. Oleh itu, jika program node.js anda tidak mengenali sintaks ES6, sila gunakan Babel untuk mentranskodkannya, yang mungkin menyelesaikan masalah.

Bagaimana untuk menukar es6 kepada es5?

Gunakan babel untuk menukar es6 kepada es5.

Di bawah kami tuliskan proses penggunaan Babel pada baris arahan supaya anda boleh memahami keseluruhan proses terjemahan.

1. Pasang alat baris arahan Babel dalam projek

npm install -D babel-cli

2. Sediakan kod ES6

Biasanya Kami letakkan kod sumber dalam direktori src. Jika anda tidak mempunyai kod ES6 siap pakai, buat satu dalam direktori src:

// src/example.js
class Hello {
  static world() {
    console.log('Hello, World!');
  }
}
Hello.world();

Konfigurasikan Babel

Babel menyalin kod melalui pemalam dan pratetap (supaya ia boleh mentranspile lebih daripada sekadar ES6). Untuk menterjemah ES6 kepada ES5, kami hanya perlu mengkonfigurasi nilai lalai env dan memasang pemalam ini:

npm install -D babel-preset-env

Kami juga memerlukan fail konfigurasi, buat fail dalam direktori akar projek: . babelrc, kandungan Seperti berikut:

// .babelrc
{
  "presets": ["env"]
}

4 Cipta arahan npm

Langkah ini tidak perlu, kerana ia telah dikonfigurasikan sebelum ini, anda boleh melaksanakan arahan itu. terus:

babel src -d build

Ini akan menterjemah kod Javascript dalam direktori src ke dalam ES5 dan menyimpannya dalam direktori binaan.

Secara konvensional, kami meletakkan arahan dari pintu ke pintu dalam arahan npm. Dalam package.json projek, masukkan kandungan berikut:

"scripts": {
  "build": "babel src -d build",
},

Jadi anda boleh menggunakan arahan berikut untuk menterjemah kod ES6:

npm run build

[Cadangan berkaitan: javascript tutorial video, bahagian hadapan web]

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