Membuat situs yang berfungsi dengan baik di semua browser utama merupakan prinsip inti dari ekosistem web terbuka. Namun, hal ini berarti pekerjaan tambahan untuk memastikan semua kode yang Anda tulis didukung di setiap browser yang akan ditargetkan. Jika ingin menggunakan fitur bahasa JavaScript baru, Anda perlu melakukan transpilasi fitur ini ke format yang kompatibel dengan versi lama untuk browser yang belum mendukungnya.
Babel adalah alat yang paling banyak digunakan untuk mengompilasi kode yang berisi sintaksis baru ke dalam kode yang dapat dipahami oleh berbagai browser dan lingkungan (seperti Node). Panduan ini mengasumsikan bahwa Anda menggunakan Babel, jadi Anda
harus mengikuti petunjuk penyiapan untuk
menyertakannya ke dalam aplikasi jika belum melakukannya. Pilih webpack
di Build Systems
jika Anda menggunakan webpack sebagai pemaket modul di aplikasi.
Untuk menggunakan Babel agar hanya melakukan transpilasi yang diperlukan bagi pengguna, Anda harus:
- Identifikasi browser yang ingin Anda targetkan.
- Gunakan
@babel/preset-env
dengan target browser yang sesuai. - Gunakan
<script type="module">
untuk berhenti mengirim kode yang ditranspilasi ke browser yang tidak membutuhkannya.
Identifikasi browser yang ingin Anda targetkan
Sebelum mulai mengubah cara kode di aplikasi ditranspilasi, Anda harus mengidentifikasi browser yang mengakses aplikasi Anda. Analisis browser yang saat ini digunakan pengguna dan browser yang ingin Anda targetkan untuk membuat keputusan yang tepat.
Menggunakan @babel/preset-env
Transpilasi kode biasanya akan menghasilkan ukuran file yang lebih besar daripada format aslinya. Dengan meminimalkan jumlah kompilasi yang Anda lakukan, Anda dapat mengurangi ukuran paket untuk meningkatkan performa halaman web.
Daripada menyertakan plugin tertentu untuk mengompilasi fitur bahasa tertentu yang Anda gunakan secara selektif, Babel menyediakan sejumlah preset yang memaketkan plugin bersama-sama. Gunakan @babel/preset-env untuk hanya menyertakan transformasi dan polyfill yang diperlukan untuk browser yang Anda rencanakan untuk penargetan.
Sertakan @babel/preset-env
dalam array presets
di file konfigurasi Babel, .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, sebuah konfigurasi open source yang digunakan bersama berbagai alat untuk menargetkan browser. Daftar lengkap kueri yang kompatibel dapat ditemukan di dokumentasi daftar browser.
Opsi lainnya adalah menggunakan file .browserslistrc
untuk membuat daftar lingkungan
yang ingin Anda targetkan.
Nilai ">0.25%"
akan memberi tahu Babel untuk hanya menyertakan transformasi yang diperlukan untuk mendukung browser dengan penggunaan lebih dari 0,25% dari penggunaan global. Hal ini memastikan paket Anda tidak berisi kode transpilasi yang tidak perlu untuk browser yang digunakan oleh sebagian kecil pengguna.
Dalam sebagian besar kasus, ini adalah pendekatan yang lebih baik daripada menggunakan konfigurasi berikut:
"targets": "last 2 versions"
Nilai "last 2 versions"
mentranspilasi kode Anda untuk dua versi terakhir dari setiap browser, yang berarti dukungan diberikan untuk browser yang dihentikan, seperti Internet Explorer.
Hal ini dapat menambah ukuran paket secara tidak perlu jika Anda tidak mengira browser ini digunakan untuk mengakses aplikasi Anda.
Pada akhirnya, Anda harus memilih kombinasi kueri yang sesuai agar hanya menargetkan browser yang sesuai dengan kebutuhan Anda.
Mengaktifkan perbaikan bug modern
@babel/preset-env
mengelompokkan beberapa fitur sintaksis JavaScript ke dalam koleksi dan mengaktifkan/menonaktifkan fitur tersebut berdasarkan browser target yang ditentukan. Meskipun ini berfungsi dengan baik, seluruh kumpulan
fitur sintaksis diubah saat browser yang ditargetkan berisi bug hanya dengan satu fitur.
Hal ini sering menghasilkan kode yang lebih banyak dari yang diperlukan.
Pada awalnya dikembangkan sebagai preset terpisah, opsi perbaikan bug di @babel/preset-env
mengatasi masalah ini dengan mengonversi sintaksis modern yang rusak di beberapa browser menjadi sintaksis setara terdekat yang tidak rusak di browser tersebut. Hasilnya adalah kode modern yang hampir identik dengan beberapa penyesuaian sintaksis kecil yang menjamin kompatibilitas di semua browser target. Untuk menggunakan pengoptimalan ini, pastikan Anda telah menginstal @babel/preset-env
versi 7.10 atau yang lebih baru, lalu tetapkan properti bugfixes
ke 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 dan didukung di
semua browser utama. Anda dapat menggunakan modul
untuk membuat skrip yang dapat diimpor dan diekspor dari modul lain, tetapi Anda juga
dapat menggunakannya dengan @babel/preset-env
untuk hanya menargetkan browser yang mendukung
modul tersebut.
Daripada membuat kueri untuk versi browser atau pangsa pasar tertentu, pertimbangkan untuk menentukan "esmodules" : true
di dalam kolom targets
file .babelrc
Anda.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Banyak fitur ECMAScript lebih baru yang dikompilasi dengan Babel sudah didukung di lingkungan yang mendukung modul JavaScript. Jadi, dengan melakukan hal ini, Anda akan menyederhanakan proses untuk memastikan bahwa hanya kode yang ditranspilasi yang akan digunakan untuk browser yang benar-benar membutuhkannya.
Browser yang mendukung modul mengabaikan skrip dengan atribut nomodule
.
Sebaliknya, browser yang tidak mendukung modul akan mengabaikan elemen skrip dengan
type="module"
. Ini berarti Anda dapat menyertakan modul serta penggantian 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 menjalankan main.mjs
dan mengabaikan compiled.js
.
Browser yang tidak mendukung modul akan melakukan hal yang sebaliknya.
Jika menggunakan webpack, Anda dapat menetapkan target yang berbeda dalam konfigurasi untuk dua versi aplikasi yang terpisah:
- Versi hanya untuk browser yang mendukung modul.
- Versi yang menyertakan kompilasi skrip yang berfungsi di browser lama. Ini memiliki ukuran {i>file<i} yang lebih besar, karena transpilasi perlu mendukung lebih banyak jenis {i>browser<i}.
Terima kasih kepada Connor Clark dan Jason Miller atas ulasan mereka.