Membuat situs yang berfungsi baik di semua browser utama adalah prinsip inti ekosistem web terbuka. Namun, hal ini berarti pekerjaan tambahan untuk memastikan bahwa semua kode yang Anda tulis didukung di setiap browser yang ingin Anda targetkan. Jika ingin menggunakan fitur bahasa JavaScript baru, Anda harus mentranspilasi fitur ini ke format yang kompatibel dengan versi sebelumnya untuk browser yang tidak mendukungnya.
Babel adalah alat yang paling banyak digunakan untuk mengompilasi kode
yang berisi sintaksis yang lebih 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 bundler modul di aplikasi.
Untuk menggunakan Babel hanya untuk mentranspilasi apa yang diperlukan pengguna, Anda harus:
- Mengidentifikasi browser yang ingin Anda targetkan.
- Menggunakan
@babel/preset-envdengan target browser yang sesuai. - Menggunakan
<script type="module">untuk berhenti mengirim kode yang ditranspilasi ke browser yang tidak memerlukannya.
Mengidentifikasi browser yang ingin Anda targetkan
Sebelum mulai mengubah cara kode dalam aplikasi Anda ditranspilasi, Anda harus mengidentifikasi browser yang mengakses aplikasi Anda. Analisis browser yang digunakan pengguna dan browser yang ingin Anda targetkan untuk membuat keputusan yang tepat.
Menggunakan @babel/preset-env
Kode transpilation biasanya menghasilkan file yang lebih besar dalam ukuran file daripada bentuk 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 menggabungkan plugin. Gunakan @babel/preset-env untuk hanya menyertakan transformasi dan polyfill yang diperlukan untuk browser yang ingin Anda targetkan.
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 browserslist, konfigurasi open source yang dibagikan di antara berbagai alat untuk menargetkan browser. Daftar lengkap kueri yang kompatibel ada di
dokumentasi browserslist.
Opsi lainnya adalah menggunakan file .browserslistrc untuk mencantumkan lingkungan
yang ingin Anda targetkan.
Nilai ">0.25%" memberi tahu Babel untuk hanya menyertakan transformasi
yang diperlukan untuk mendukung browser yang membentuk lebih dari 0,25% penggunaan global
. Hal ini memastikan paket Anda tidak berisi kode yang ditranspilasi yang tidak diperlukan untuk browser yang digunakan oleh persentase pengguna yang sangat kecil.
Dalam kebanyakan 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 setiap browser,
yang berarti dukungan diberikan untuk browser yang dihentikan seperti Internet Explorer.
Hal ini dapat meningkatkan ukuran paket Anda secara tidak perlu jika Anda tidak mengharapkan browser ini digunakan untuk mengakses aplikasi Anda.
Pada akhirnya, Anda harus memilih kombinasi kueri yang sesuai untuk hanya menargetkan browser yang sesuai dengan kebutuhan Anda.
Mengaktifkan perbaikan bug modern
@babel/preset-env mengelompokkan beberapa fitur sintaksis JavaScript ke dalam koleksi, mengaktifkan dan menonaktifkannya berdasarkan browser target yang ditentukan. Meskipun berfungsi dengan baik, seluruh koleksi fitur sintaksis akan diubah saat browser target berisi bug dengan hanya satu fitur.
Hal ini sering kali menghasilkan lebih banyak kode yang diubah daripada yang diperlukan.
Awalnya dikembangkan sebagai preset terpisah, opsi
perbaikan bug di @babel/preset-env
memecahkan masalah ini dengan mengonversi sintaksis modern yang rusak di beberapa browser ke sintaksis yang paling
setara 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 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.
Menggunakan <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 mengimpor dan mengekspor dari modul lain, tetapi Anda juga dapat menggunakannya dengan @babel/preset-env untuk hanya menargetkan browser yang mendukungnya.
Daripada membuat kueri untuk versi browser atau pangsa pasar tertentu, pertimbangkan untuk
menentukan "esmodules" : true di dalam file .babelrc targets Anda.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Banyak fitur ECMAScript yang lebih baru yang dikompilasi dengan Babel sudah didukung di lingkungan yang mendukung modul JavaScript. Jadi, dengan melakukannya, Anda menyederhanakan proses untuk memastikan bahwa hanya kode yang ditranspilasi yang digunakan untuk browser yang benar-benar memerlukannya.
Browser yang mendukung modul mengabaikan skrip dengan atribut nomodule.
Sebaliknya, browser yang tidak mendukung modul mengabaikan elemen skrip dengan
type="module". Artinya, 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 serta mengabaikan compiled.js. Browser tanpa dukungan modul 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 skrip yang dikompilasi yang berfungsi di browser lama mana pun. Hal ini memiliki ukuran file yang lebih besar, karena transpilation perlu mendukung berbagai browser.
Terima kasih kepada Connor Clark dan Jason Miller atas ulasannya.