Membuat situs yang berfungsi dengan baik di semua browser utama adalah prinsip inti dari ekosistem web terbuka. Namun, ini berarti pekerjaan tambahan untuk memastikan bahwa semua kode yang Anda tulis didukung di setiap browser yang akan Anda targetkan. Jika ingin menggunakan fitur bahasa JavaScript baru, Anda perlu mentranspile 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 yang lebih baru menjadi 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 mentranspile hal yang diperlukan bagi pengguna, Anda harus:
- Identifikasi browser yang ingin Anda targetkan.
- Gunakan
@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 harus mengidentifikasi browser mana yang mengakses aplikasi. Analisis browser yang saat ini digunakan pengguna serta browser yang ingin Anda targetkan untuk membuat keputusan yang tepat.
Menggunakan @babel/preset-env
Transpilasi kode biasanya menghasilkan file yang ukurannya lebih besar 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 bersama-sama. Gunakan @babel/preset-env agar 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. Dengan begitu, paket Anda tidak berisi kode transpilasi yang tidak perlu untuk browser yang hanya 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" mentranspile kode Anda untuk
dua versi terakhir dari setiap browser,
yang berarti dukungan diberikan untuk browser yang dihentikan seperti Internet Explorer.
Hal ini dapat meningkatkan ukuran paket secara tidak perlu jika Anda tidak ingin browser
ini digunakan untuk mengakses aplikasi Anda.
Pada akhirnya, Anda harus memilih kombinasi kueri yang tepat 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/menonaktifkannya
berdasarkan browser target yang ditentukan. Meskipun cara ini berfungsi dengan baik, seluruh kumpulan fitur sintaksis akan diubah saat browser yang ditargetkan berisi bug hanya dengan satu fitur.
Hal ini sering kali menghasilkan lebih banyak kode yang ditransformasi daripada yang diperlukan.
Awalnya dikembangkan sebagai preset terpisah,
opsi perbaikan bug di @babel/preset-env
menyelesaikan masalah ini dengan mengonversi sintaksis modern yang rusak di beberapa browser ke 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 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 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, sebaiknya tentukan "esmodules" : true di dalam kolom targets file .babelrc 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 begitu Anda menyederhanakan proses untuk memastikan bahwa hanya kode yang ditranspilasi yang 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 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 menjalankan main.mjs serta mengabaikan compiled.js.
Browser yang tidak mendukung modul akan melakukan hal 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 dan berfungsi di browser lama. File ini memiliki ukuran file yang lebih besar, karena transpilasi perlu mendukung lebih banyak browser.
Terima kasih kepada Connor Clark dan Jason Miller atas ulasan mereka.