Membangun situs web yang bekerja dengan baik di semua {i>browser<i} utama adalah prinsip inti dari ekosistem web terbuka. Namun demikian, ini berarti pekerjaan tambahan untuk memastikan bahwa semua kode yang Anda tulis didukung di setiap {i>browser<i} yang Anda rencanakan. Jika Anda ingin menggunakan fitur bahasa JavaScript yang baru, Anda harus melakukan transpilasi ke format yang kompatibel dengan versi lama untuk browser yang belum mendukung mereka.
Babel adalah alat yang paling banyak digunakan untuk mengompilasi kode
yang berisi sintaksis baru ke dalam kode yang mengarahkan browser dan lingkungan berbeda
(seperti Node) dapat dipahami. Panduan ini mengasumsikan bahwa Anda menggunakan Babel, sehingga
harus mengikuti petunjuk penyiapan untuk
menyertakannya dalam aplikasi
jika Anda belum melakukannya. Pilih webpack
di Build Systems jika Anda menggunakan webpack sebagai pemaket modul dalam aplikasi.
Untuk menggunakan Babel agar hanya transpilasi yang dibutuhkan untuk pengguna, Anda harus:
- Identifikasi browser yang ingin Anda targetkan.
- Menggunakan
@babel/preset-envdengan target browser yang sesuai. - Gunakan
<script type="module">untuk berhenti mengirim kode yang ditranspilasi ke browser yang tidak membutuhkannya.
Mengidentifikasi browser yang ingin Anda targetkan
Sebelum mulai mengubah cara transpilasi kode dalam aplikasi, Anda perlu mengidentifikasi browser mana yang mengakses aplikasi Anda. Menganalisis browser yang saat ini digunakan pengguna serta pengguna yang akan Anda targetkan untuk melakukan keputusan berdasarkan data yang baik.
Menggunakan @babel/preset-env
Transpilasi kode biasanya menghasilkan file yang ukuran filenya lebih besar dari dalam bentuk aslinya. Dengan meminimalkan jumlah kompilasi yang Anda lakukan, dapat mengurangi ukuran paket Anda untuk meningkatkan performa halaman web.
Daripada menyertakan plugin tertentu untuk mengompilasi bahasa tertentu secara selektif fitur yang Anda gunakan, Babel menyediakan sejumlah {i>preset<i} yang menggabungkan plugin secara bersamaan. Menggunakan @babel/preset-env agar hanya menyertakan transformasi dan polyfill yang diperlukan untuk browser yang Anda rencanakan penargetan.
Menyertakan @babel/preset-env dalam array presets di Babel Anda
file konfigurasi, .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
Gunakan kolom targets untuk menentukan versi browser yang ingin Anda sertakan
dengan menambahkan kueri yang sesuai ke kolom browsers. @babel/preset-env
terintegrasi dengan daftar browser, konfigurasi {i>open-source<i} yang digunakan bersama oleh
untuk menargetkan browser. Daftar lengkap kueri yang kompatibel ada di
dokumentasi browserslist.
Opsi lainnya adalah menggunakan file .browserslistrc untuk membuat daftar lingkungan
yang ingin ditargetkan.
Nilai ">0.25%" memberi tahu Babel untuk hanya menyertakan transformasi
yang diperlukan untuk mendukung browser yang mengisi lebih dari 0,25% dari
tingkat penggunaan. Ini memastikan paket Anda tidak berisi file transpilasi yang tidak perlu
kode untuk {i>browser<i} yang digunakan
oleh sebagian kecil pengguna.
Umumnya, ini adalah pendekatan yang lebih baik daripada menggunakan konfigurasi:
"targets": "last 2 versions"
Nilai "last 2 versions" mentranspilasi kode Anda untuk
dua versi terakhir dari setiap browser,
yang artinya dukungan disediakan untuk browser yang dihentikan seperti Internet Explorer.
Hal ini dapat meningkatkan ukuran paket jika Anda tidak menginginkan
browser yang akan digunakan untuk mengakses aplikasi Anda.
Pada akhirnya, Anda harus memilih kombinasi kueri yang sesuai untuk hanya menargetkan {i>browser<i} yang sesuai dengan kebutuhan Anda.
Aktifkan perbaikan bug modern
@babel/preset-env mengelompokkan beberapa fitur sintaksis JavaScript ke dalam koleksi dan mengaktifkan/menonaktifkan
berdasarkan browser target yang ditentukan. Meskipun ini bekerja dengan baik, seluruh koleksi
fitur sintaks diubah ketika {i>browser<i} target berisi {i>bug<i} dengan hanya satu fitur.
Hal ini sering kali menyebabkan lebih banyak kode yang diubah daripada yang diperlukan.
Awalnya dikembangkan sebagai preset terpisah,
opsi perbaikan bug di @babel/preset-env
dengan mengonversi {i>syntax<i} modern yang rusak di beberapa {i>browser<i} ke {i>string<i}
sintaks yang setara yang tidak
rusak di {i>browser<i} tersebut. Hasilnya adalah kode modern yang hampir identik
dengan beberapa penyesuaian kecil pada {i>syntax<i} yang
menjamin kompatibilitas di semua {i>browser<i} target. Untuk menggunakannya
pengoptimalan ini, pastikan Anda telah menginstal @babel/preset-env 7.10 atau yang lebih baru, lalu setel
properti bugfixes menjadi true:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
Di Babel 8, opsi bugfixes akan diaktifkan secara default.
Gunakan <script type="module">
Modul JavaScript, atau modul ES, adalah fitur yang relatif baru yang didukung di
semua browser utama. Anda dapat menggunakan modul
untuk membuat skrip yang dapat diimpor dan diekspor dari modul lain, tetapi Anda dapat
juga menggunakannya dengan @babel/preset-env untuk hanya menargetkan browser yang mendukung
mereka.
Daripada membuat kueri untuk versi browser atau pangsa pasar tertentu, pertimbangkan
menentukan "esmodules" : true di dalam kolom targets file .babelrc.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Banyak fitur ECMAScript baru yang dikompilasi dengan Babel sudah didukung di lingkungan yang mendukung modul JavaScript. Dengan melakukannya, Anda menyederhanakan proses untuk memastikan bahwa hanya kode yang ditranspilasi yang digunakan bagi browser yang benar-benar membutuhkannya.
Browser yang mendukung modul mengabaikan skrip dengan atribut nomodule.
Sebaliknya, {i>browser<i} yang tidak mendukung modul mengabaikan elemen skrip dengan
type="module". Ini berarti Anda dapat menyertakan modul serta fallback yang dikompilasi.
Idealnya, dua skrip versi aplikasi disertakan seperti ini:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
Browser yang mendukung modul mengambil dan mengeksekusi main.mjs serta mengabaikan compiled.js.
Browser yang tidak mendukung modul melakukan hal sebaliknya.
Jika menggunakan webpack, Anda dapat menetapkan target yang berbeda dalam konfigurasi untuk dua versi terpisah dari aplikasi Anda:
- Versi hanya untuk browser yang mendukung modul.
- Versi yang mencakup kompilasi skrip yang berfungsi di browser lama apa pun. {i>File<i} ini berukuran lebih besar, karena transpilasi harus mendukung berbagai {i>browser<i} yang lebih luas.
Terima kasih kepada Connor Clark dan Jason Miller atas ulasan mereka.