Untuk keserasian penyemak imbas. Sebagai spesifikasi baharu untuk JS, ES6 menambah banyak sintaks dan API baharu Walau bagaimanapun, penyemak imbas moden tidak mempunyai sokongan tinggi untuk ciri baharu ES6, jadi kod ES6 perlu ditukar kepada kod ES5. Dalam alat pembangun web WeChat, babel digunakan secara lalai untuk menukar kod sintaks ES6 pembangun kepada kod ES5 yang disokong dengan baik oleh ketiga-tiga terminal, membantu pembangun menyelesaikan masalah pembangunan yang disebabkan oleh persekitaran yang berbeza anda hanya perlu mengkonfigurasi kotak semak Just gunakan pilihan "ES6 hingga ES5".

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

Sebab applet menukar es6 kepada es5

Sebab: Untuk keserasian penyemak imbas dan untuk berjalan dalam nod Persekitaran js boleh menjalankan aplikasi dengan lancar .

ES6, sebagai spesifikasi baharu JS, menambah banyak sintaks dan API baharu, tetapi penyemak imbas moden tidak mempunyai sokongan tinggi untuk ciri baharu ES6, jadi jika anda ingin menggunakan yang baharu ciri ES6 secara langsung dalam pelayar Ciri mesti dilaksanakan dengan bantuan alat lain. Untuk menukar kod ES6 kepada kod ES5, cuma pasang dan konfigurasikan alat Babel dalam projek.

Dalam persekitaran node.js, sokongan nod untuk ES6 telah dikritik selepas versi 13 mod modul diperkenalkan (tambahkan ayat pada package.json : "type": "modul"), 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.

Tukar es6 kepada es5 dalam program mini

Dalam alatan pembangunan 0.10.101000 dan versi yang lebih baru, ia akan Babel digunakan secara lalai untuk menukar kod sintaks ES6 pembangun kepada kod ES5 yang disokong dengan baik oleh ketiga-tiga terminal, membantu pembangun menyelesaikan masalah pembangunan yang disebabkan oleh persekitaran yang berbeza.

Dalam projek, cuma semak pilihan ES6 hingga ES5

Perlu diingatkan bahawa:

Untuk meningkatkan kualiti kod, apabila fungsi penukaran ES6 dihidupkan, mod ketat javasctipt didayakan secara lalai Sila rujuk "guna ketat"

Apa. adakah Babel?

Babel ialah transkoder ES6 yang boleh menukar kod ES6 kepada kod ES5, supaya pelayar lama yang tidak menyokong ES6 pada asalnya boleh melaksanakan kod ES6, Contoh: Fungsi anak panah ES6
Contoh kod:

//?轉碼前：使用了ES6箭頭函數(shù)
items.map(item?=>?item?+?1);

//?轉碼后：轉為了普通函數(shù)
items.map(function?(item)?{
??return?item?+?1;
});

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., kandungannya adalah seperti berikut:
Fail ini digunakan untuk menetapkan peraturan transkod dan pemalam Format asas adalah seperti berikut.

//?.babelrc

{

??"presets":?[],

??"plugins":?[]

}

Perhatikan bahawa .babelrc mempunyai titik sebelum dan selepasnya, jadi ia boleh disimpan dengan jayanya

<.> medan pratetap

Medan pratetap menetapkan peraturan transcoding Set peraturan berikut disediakan secara rasmi. Anda boleh memasangnya mengikut keperluan.

Peraturan transkoding terkini

$?npm?install?--save-dev?@babel/preset-env

peraturan transcoding bertindak balas

$?npm?install?--save-dev?@babel/preset-react

Kemudian, peraturan ini ialah ditambah kepada .babelrc. Contoh kod:

??{

????"presets":?[

??????"@babel/env",

??????"@babel/preset-react"

????],

????"plugins":?[]

??}

Perhatikan bahawa sebelum menggunakan semua alatan dan modul Babel di bawah, .babelrc mesti ditulis dahulu.

Peraturan transcoding dan transcoding baris perintah

Babel menyediakan alat baris arahan @babel/cli untuk transcoding baris arahan.

Arahan pemasangannya adalah seperti berikut.

$?npm?install?--save-dev?@babel/cli

Penggunaan asas adalah seperti berikut.

#?轉碼結果輸出到標準輸出
$?babel?test.js
?
#?轉碼結果寫入一個文件
#?--out-file?或?-o?參數(shù)指定輸出文件
$?babel?a.js?--out-file?b.js
#?或者
$?babel?a.js?-o?b.js
?
#?整個目錄轉碼
#?--out-dir?或?-d?參數(shù)指定輸出目錄
$?babel?src?--out-dir?lib
#?或者
$?babel?src?-d?lib
?
#?-s?參數(shù)生成source?map文件
$?babel?src?-d?lib?-s

Gunakan perintah babel-node untuk mendapatkan transcoding persekitaran REPL

Arahan babel-node modul @babel/node menyediakan Persekitaran REPL yang didayakan ES6. Ia menyokong semua ciri persekitaran REPL Node dan boleh menjalankan kod ES6 secara langsung.

Mula-mula, pasang modul ini.

$?npm?install?--save-dev?@babel/node

Kemudian, laksanakan nod-babel untuk memasuki persekitaran REPL.

modul @babel/register

$?npx?balel-node

Modul @babel/register menulis semula perintah memerlukan dan menambahkan cangkuk padanya. Sejak itu, apabila anda menggunakan keperluan untuk memuatkan fail dengan akhiran .js, .jsx, .es dan .es6, ia akan ditranskodkan dengan Babel terlebih dahulu.

$?npm?install?--save-dev?@babel/register

使用時，必須首先加載@babel/register。

//?index.js

require('@babel/register');

require('./es6.js');

然后，就不需要手動對index.js轉碼了。

$?node?index.js

需要注意的是，@babel/register只會對require命令加載的文件轉碼，而不會對當前文件轉碼。另外，由于它是實時轉碼，所以只適合在開發(fā)環(huán)境使用。

瀏覽器環(huán)境

Babel 也可以用于瀏覽器環(huán)境，使用@babel/standalone模塊提供的瀏覽器版本，將其插入網(wǎng)頁。

<script></script>

<script>

// Your ES6 code

</script>

注意，網(wǎng)頁實時將 ES6 代碼轉為 ES5，對性能會有影響。生產(chǎn)環(huán)境需要加載已經(jīng)轉碼完成的腳本。

【推薦學習：javascript視頻教程】

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