Tüm büyük tarayıcılarda iyi çalışan web siteleri oluşturmak, açık bir web ekosisteminin temel ilkelerindendir. Ancak bu, yazdığınız tüm kodların hedeflemeyi planladığınız her tarayıcıda desteklendiğinden emin olmak için ek çalışma yapmanız gerektiği anlamına gelir. Yeni JavaScript dil özelliklerini kullanmak istiyorsanız bu özellikleri, desteklemeyen tarayıcılar için geriye dönük uyumlu biçimlere çevirmeniz gerekir.
Babel, daha yeni söz dizimi içeren kodları farklı tarayıcıların ve ortamların (ör. Node) anlayabileceği kodlara derlemek için en yaygın kullanılan araçtır. Bu kılavuzda Babel'i kullandığınız varsayılmaktadır. Bu nedenle, henüz yapmadıysanız kurulum talimatlarını uygulayarak Babel'i uygulamanıza dahil etmeniz gerekir. Uygulamanızda modül paketleyici olarak webpack kullanıyorsanız Build Systems bölümünde webpack seçeneğini belirleyin.
Babel'ı yalnızca kullanıcılarınız için gerekenleri çevirmek üzere kullanmak istiyorsanız:
- Hangi tarayıcıları hedeflemek istediğinizi belirleyin.
@babel/preset-envözelliğini uygun tarayıcı hedefleriyle kullanın.- Dönüştürülmüş kodu ihtiyaç duymayan tarayıcılara göndermeyi durdurmak için
<script type="module">kullanın.
Hangi tarayıcıları hedeflemek istediğinizi belirleyin
Uygulamanızdaki kodun nasıl derleneceğini değiştirmeye başlamadan önce uygulamanıza hangi tarayıcıların eriştiğini belirlemeniz gerekir. Kullanıcılarınızın kullandığı ve hedeflemeyi planladığınız tarayıcıları analiz ederek bilinçli bir karar verin.
@babel/preset-env kullanma
Kodu başka bir dile dönüştürme işlemi genellikle orijinal biçimlerinden daha büyük bir dosya boyutuyla sonuçlanır. Derleme miktarını en aza indirerek paketlerinizin boyutunu küçültebilir ve web sayfasının performansını artırabilirsiniz.
Babel, kullandığınız belirli dil özelliklerini seçerek derlemek için belirli eklentileri dahil etmek yerine eklentileri birlikte paketleyen bir dizi hazır ayar sunar. Yalnızca hedeflemeyi planladığınız tarayıcılar için gereken dönüştürmeleri 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%"
}
]
]
}
targets alanına uygun bir sorgu ekleyerek hangi tarayıcı sürümlerini dahil etmek istediğinizi belirtmek için browsers 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.
Hedeflemek istediğiniz ortamları listelemek için .browserslistrc dosyası da kullanabilirsiniz.
">0.25%" değeri, Babel'e yalnızca küresel kullanımın% 0,25'inden fazlasını oluşturan tarayıcıları desteklemek için gereken dönüşümleri 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 dönüştürülmüş 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, her tarayıcının son iki sürümü için kodunuzu derler. Bu sayede, Internet Explorer gibi desteği sonlandırılmış tarayıcılar için destek sağlanır.
Bu tarayıcıların uygulamanıza erişmek için kullanılmasını beklemiyorsanız bu durum, paketinizin boyutunu gereksiz yere artırabilir.
Sonuç olarak, 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,
belirtilen hedef tarayıcılara göre bunları etkinleştirir ve devre dışı bırakır. Bu yöntem iyi çalışsa da hedeflenen tarayıcıda yalnızca tek bir özellikle ilgili hata olduğunda tüm söz dizimi özellikleri koleksiyonu dönüştürülür.
Bu durum genellikle gerekenden daha fazla dönüştürülmüş kodla sonuçlanır.
Başlangıçta ayrı bir hazır ayar olarak geliştirilen @babel/preset-env'deki bugfixes 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ün yüklü olduğundan emin olun, ardından bugfixes özelliğini true olarak ayarlayın:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
Babel 8'de bugfixes seçeneği varsayılan olarak etkinleştirilir.
<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. Diğer modüllerden içe ve dışa aktarma yapabilen komut dosyaları oluşturmak için modülleri kullanabilirsiniz. Ayrıca, bunları yalnızca destekleyen tarayıcıları hedeflemek için @babel/preset-env ile birlikte de kullanabilirsiniz.
Belirli tarayıcı sürümleri veya pazar payı için sorgu oluşturmak yerine .babelrc dosyanızın targets alanında "esmodules" : true değerini belirtmeyi deneyin.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Babel ile derlenen birçok yeni ECMAScript özelliği, JavaScript modüllerini destekleyen ortamlarda zaten desteklenmektedir. Bunu yaparak, yalnızca gerçekten ihtiyaç duyan tarayıcılarda derlenmiş kodun kullanılmasını sağlama sürecini basitleştirirsiniz.
Modülleri destekleyen tarayıcılar, nomodule özelliği içeren komut dosyalarını yoksayar.
Bunun aksine, modülleri desteklemeyen tarayıcılar type="module" içeren komut dosyası öğelerini yoksayar. Bu nedenle, derlenmiş bir yedekle birlikte bir modül de ekleyebilirsiniz.
İdeal olarak, bir uygulamanın iki sürüm komut dosyası şu şekilde 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ül desteği olmayan 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. Dönüştürme işlemi daha geniş bir tarayıcı yelpazesini desteklemesi gerektiğinden bu dosyanın boyutu daha büyüktür.
Yorumları için Connor Clark ve Jason Miller'a teşekkür ederiz.