Önde gelen tüm tarayıcılarda sorunsuz çalışan web siteleri oluşturmak, açık web ekosisteminin temel ilkesidir. Ancak bu, yazdığınız tüm kodun hedeflemeyi planladığınız her tarayıcıda desteklenmesini sağlamak için ek çalışma anlamına gelir. Yeni JavaScript dil özelliklerini kullanmak istiyorsanız bu özellikleri henüz desteklemeyen tarayıcılar için geriye dönük uyumlu biçimlere dönüştürmeniz gerekir.
Babel, daha yeni söz dizimi içeren kodu farklı tarayıcıların ve ortamların (Node gibi) anlayabileceği koda derlemek için en yaygın kullanılan araçtır. Bu kılavuzda Babel kullandığınız varsayılmaktadır. Bu nedenle, henüz yapmadıysanız kurulum talimatlarını uygulayarak uygulamanıza eklemeniz gerekir. Uygulamanızda modül birleştirme aracı olarak webpack kullanıyorsanız Build Systems bölümünde webpack seçeneğini belirleyin.
Babel'i yalnızca kullanıcılarınız için gerekenleri aktarmak üzere kullanmak için aşağıdakileri yapmanız gerekir:
- Hedeflemek istediğiniz tarayıcıları belirleyin.
@babel/preset-envöğesini uygun tarayıcı hedefleriyle kullanın.<script type="module">kullanarak, derlenmiş kodun ihtiyaç duymayan tarayıcılara gönderilmesini durdurun.
Hedeflemek istediğiniz tarayıcıları belirleyin
Uygulamanızdaki kodun nasıl derlendiğini değiştirmeye başlamadan önce uygulamanıza hangi tarayıcıların eriştiğini belirlemeniz gerekir. Bilgili bir karar vermek için kullanıcılarınızın şu anda kullandığı ve hedeflemeyi planladığınız tarayıcıları analiz edin.
@babel/preset-env kullanma
Kodun derlenmesi genellikle dosya boyutu orijinal biçimlerinden daha büyük olan bir dosyayla sonuçlanır. Yaptığınız derleme miktarını en aza indirerek web sayfasının performansını iyileştirmek için paketlerinizin boyutunu azaltabilirsiniz.
Babel, kullandığınız belirli dil özelliklerini seçerek derlemek için belirli eklentiler eklemek yerine, eklentileri bir araya getiren çeşitli hazır ayarlar sunar. Yalnızca hedeflemeyi planladığınız tarayıcılar için gereken dönüştürme işlemlerini ve polyfill'leri dahil etmek üzere @babel/preset-env kullanın.
Babel yapılandırma dosyanızdaki presets dizisine @babel/preset-env öğesini ekleyin: .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
browsers alanına uygun bir sorgu ekleyerek dahil etmek istediğiniz tarayıcı sürümlerini belirtmek için targets alanını kullanın. @babel/preset-env, tarayıcıları hedeflemek için farklı araçlar arasında paylaşılan açık kaynaklı bir yapılandırma olan browserslist ile entegre olur. Uyumlu sorguların tam listesini browserslist belgelerinde bulabilirsiniz.
Diğer bir seçenek de hedeflemek istediğiniz ortamları listelemek için .browserslistrc dosyası kullanmaktır.
">0.25%" değeri, Babel'e yalnızca dünya genelindeki kullanımın% 0,25'inden fazlasını oluşturan tarayıcıları desteklemek için gereken dönüştürme işlemlerini dahil etmesini söyler. Bu sayede paketiniz, kullanıcıların çok küçük bir yüzdesi tarafından kullanılan tarayıcılar için gereksiz şekilde derlenmiş kod içermez.
Çoğu durumda bu, aşağıdaki yapılandırmayı kullanmaktan daha iyi bir yaklaşımdır:
"targets": "last 2 versions"
"last 2 versions" değeri, kodunuzu her tarayıcının son iki sürümü için derleyip dönüştürür. Bu, Internet Explorer gibi kullanımdan kaldırılan tarayıcılar için destek sağlanacağı anlamına gelir.
Bu tarayıcıların uygulamanıza erişmek için kullanılmasını beklemiyorsanız bu, paketinizin boyutunu gereksiz yere artırabilir.
Sonuçta, yalnızca ihtiyaçlarınıza uygun tarayıcıları hedeflemek için uygun sorgu kombinasyonunu seçmeniz gerekir.
Modern hata düzeltmelerini etkinleştirme
@babel/preset-env, birden fazla JavaScript söz dizimi özelliğini koleksiyonlar halinde gruplandırır ve belirtilen hedef tarayıcılara göre etkinleştirir/devre dışı bırakır. Bu yöntem iyi sonuç verse de hedeflenen tarayıcıda yalnızca tek bir özellikte hata olduğunda söz dizimi özelliklerinin tamamı dönüştürülür.
Bu durum genellikle gerekenden daha fazla dönüştürülmüş koda neden olur.
Başlangıçta ayrı bir hazır ayar olarak geliştirilen @babel/preset-env'teki hata düzeltme seçeneği, bazı tarayıcılarda bozuk olan modern söz dizimini, bu tarayıcılarda bozuk olmayan en yakın eşdeğer söz dizimine dönüştürerek bu sorunu çözer. Sonuç, tüm hedef tarayıcılarda uyumluluğu garanti eden birkaç küçük söz dizimi değişikliğiyle neredeyse aynı modern koddur. Bu optimizasyonu kullanmak için @babel/preset-env 7.10 veya sonraki bir sürümü yüklediğinizden emin olun, ardından bugfixes mülkünü true olarak ayarlayın:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
Babel 8'de bugfixes seçeneği varsayılan olarak etkinleştirilecektir.
<script type="module"> hareketini kullanın
JavaScript modülleri veya ES modülleri, tüm büyük tarayıcılarda desteklenen nispeten yeni bir özelliktir. Modülleri, diğer modüllerden içe ve dışa aktarabilen komut dosyaları oluşturmak için kullanabilirsiniz. Ancak yalnızca destekleyen tarayıcıları hedeflemek için bunları @babel/preset-env ile de kullanabilirsiniz.
Belirli tarayıcı sürümleri veya pazar payı için sorgu yerine .babelrc dosyanızın targets alanında "esmodules" : true değerini belirtebilirsiniz.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Babel ile derlenen birçok yeni ECMAScript özelliği, JavaScript modüllerini destekleyen ortamlarda zaten desteklenmektedir. Böylece, yalnızca aktarılan kodun gerçekten ihtiyacı olan tarayıcılar için kullanıldığından emin olma sürecini basitleştirmiş olursunuz.
Modülleri destekleyen tarayıcılar, nomodule özelliğine sahip komut dosyalarını yoksayar.
Buna karşılık, modülleri desteklemeyen tarayıcılar type="module" içeren komut dosyası öğelerini yoksayar. Yani derlenmiş bir yedek ile birlikte bir modül de ekleyebilirsiniz.
İdeal olarak, bir uygulamanın iki sürüm komut dosyası aşağıdaki gibi eklenir:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
Modülleri destekleyen tarayıcılar main.mjs öğesini getirip yürütür ve compiled.js öğesini yoksayar.
Modülleri desteklemeyen tarayıcılar ise tam tersini yapar.
Webpack kullanıyorsanız uygulamanızın iki ayrı sürümü için yapılandırmalarınızda farklı hedefler belirleyebilirsiniz:
- Yalnızca modülleri destekleyen tarayıcılar için bir sürüm.
- Herhangi bir eski tarayıcıda çalışan derlenmiş bir komut dosyası içeren sürüm. Bu yöntem, daha geniş bir tarayıcı yelpazesini desteklemesi gerektiğinden daha büyük dosya boyutuna sahiptir.
Yorumları için Connor Clark ve Jason Miller'a teşekkürler.