Belli başlı tüm tarayıcılarda sorunsuz çalışan web siteleri geliştirmek, açık bir web ekosistemidir. Ancak bu, tüm tedarikçilerin yazdığınız kod, hedeflemeyi planladığınız her tarayıcıda desteklenir. Şu durumda: JavaScript dili özelliklerini kullanmak istiyorsanız, bu özellikleri desteklenmeyen tarayıcılar için geriye dönük uyumlu biçimlere gerekir.
Babel, kod derlemek için en yaygın olarak kullanılan araçtır
farklı tarayıcıların ve ortamların kullandığı daha yeni söz dizimini içeren
(Düğüm gibi) anlayabilir. Bu kılavuzda Babel kullandığınız varsayılmıştır. Dolayısıyla,
kurulum talimatlarını uygulayarak
Henüz eklemediyseniz de bunu uygulamanıza dahil edin. webpack en boy oranını seçin
Uygulamanızda modül paketleyici olarak webpack kullanıyorsanız Build Systems ürününden yararlanabilirsiniz.
Babel'i yalnızca kullanıcılarınız için gerekenleri aktarmak üzere kullanmak istiyorsanız şunları yapması gerekir:
- Hedeflemek istediğiniz tarayıcıları belirleyin.
@babel/preset-envuygulamasını uygun tarayıcı hedefleriyle kullanın.- Aktarılan kodu, ihtiyaç duymayan tarayıcılara göndermeyi durdurmak için
<script type="module">kullanın.
Hedeflemek istediğiniz tarayıcıları belirleyin
Uygulamanızdaki kodun aktarılma şeklini değiştirmeye başlamadan önce, uygulamanıza hangi tarayıcıların eriştiğini belirlemeniz gerekir. Hangi tarayıcıları analiz edeceğinizi daha iyi bir hale getirmek için hedeflemeyi planladıklarınızın yanı sıra, amacıyla kullanılan bir araştırma türüdür.
@babel/preset-env hesabını kullanın
Kod dönüştürme işlemi, genellikle dosya boyutu üretilmesine de yardımcı olabilir. Gerçekleştirdiğiniz derleme miktarını en aza indirerek bir web sayfasının performansını artırmak için paketlerinizin boyutunu küçültebilir.
Belirli bir dili seçerek derlemek için belirli eklentiler eklemek yerine özellikleri kullanıyorsanız Babel, kullandığınız eklentileri içeren bir dizi hazır ayar sağlar. birlikte. @babel/preset-env ayarını kullanın hedeflemenize yardımcı olabilir.
Babel'inizdeki presets dizisine @babel/preset-env ekleyin
yapılandırma dosyası, .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
Dahil etmek istediğiniz tarayıcı sürümlerini belirtmek için targets alanını kullanın
browsers alanına uygun bir sorgu ekleyerek. @babel/preset-env.
tarayıcı listesi, farklı kullanıcılar ve web siteleri arasında paylaşılan açık kaynaklı bir
araçlarını kullanabilirsiniz. Uyumlu sorguların tam listesini şurada bulabilirsiniz:
browserslist dokümanlarına göz atın.
Diğer bir seçenek de ortamları listelemek için .browserslistrc dosyası kullanmaktır.
seçin.
">0.25%" değeri, Babel'a yalnızca dönüşümleri dahil etmesini söyler
tüm dünyanın% 0,25'inden fazlasını oluşturan tarayıcıları desteklemek için
bazı yolları da görmüştük. Böylece, paketinizin gereksiz dönüştürülmüş metin içermediğinden emin olun.
tarayıcılara yönelik bir kod bulmanız gerekir.
Çoğu durumda bu, aşağıdaki yapılandırma:
"targets": "last 2 versions"
"last 2 versions" değeri,
Her tarayıcının son iki sürümünü kullanıyorsanız
Bu, Internet Explorer gibi kullanımdan kaldırılan tarayıcılar için destek sağlanacağı anlamına gelir.
Bu, beklemediğiniz bir paketse paketinizin boyutunu gereksiz yere artırabilir
tarayıcılarını kullanabilirsiniz.
Sonuç olarak, yalnızca tek bir tıklama için doğru sorgu kombinasyonunu ihtiyaçlarınıza uygun tarayıcıları hedefleyebilirsiniz.
Modern hata düzeltmelerini etkinleştir
@babel/preset-env, birden çok JavaScript söz dizimi özelliğini koleksiyonlar halinde gruplandırır ve etkinleştirir/devre dışı bırakır
bunları belirtilen hedef tarayıcılara göre değiştirin. Bu yöntem işe yaramış olsa da,
Hedeflenen tarayıcı tek bir özelliğe sahip bir hata içerdiğinde söz dizimi özellikleri dönüştürülür.
Bu durum genellikle kodun gereğinden fazla dönüştürülmesine neden olur.
İlk olarak ayrı bir hazır ayar olarak geliştirilmiştir.
@babel/preset-env konumunda hata düzeltmeleri seçeneği
bazı tarayıcılarda bozuk olan modern söz dizimini en yakın konuma dönüştürerek bu sorunu çözer
söz konusu tarayıcılarda bozuk olmayan eşdeğer söz dizimi. Sonuç olarak, neredeyse aynı modern kod ortaya çıkar
söz dizimini değiştirerek tüm hedef tarayıcılarda uyumluluğu garantileyebilirsiniz. Bunu kullanmak için
kullanıyorsanız @babel/preset-env 7.10 veya sonraki bir sürümün yüklü olduğundan emin olun ve
bugfixes mülkünü true öğesine bağlayı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, Microsoft Word'de desteklenen göreceli olarak yeni bir özelliktir.
tüm büyük tarayıcılarda. Modülleri kullanarak
diğer modüllerden içe ve dışa aktarabilen komut dosyaları oluşturabilirsiniz, ancak
yalnızca@babel/preset-env
gerekir.
Belirli tarayıcı sürümlerini veya pazar payını sorgulamak yerine
.babelrc dosyanızın targets alanında "esmodules" : true belirterek
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Babel ile derlenen birçok yeni ECMAScript özelliği zaten desteklenmektedir JavaScript modüllerini destekleyen ortamlarda Böylece bu sayede yalnızca dönüştürülmüş kodun kullanıldığından emin olma sürecini basitleştirirsiniz. daha hızlı ve kolay bir şekilde kullanabilirsiniz.
Modülleri destekleyen tarayıcılar, nomodule özelliğine sahip komut dosyalarını yoksayar.
Öte yandan, modülleri desteklemeyen tarayıcılar,
type="module" Yani bir modül ve derlenmiş bir yedek dahil edebilirsiniz.
İdeal olarak, bir uygulamanın iki sürüm komut dosyaları aşağıdaki gibi eklenmelidir:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
Modüllerin main.mjs getirme ve çalıştırma işlemlerini destekleyen ve compiled.js öğesini yoksayan tarayıcılar.
Modülleri desteklemeyen tarayıcılar tam tersini yapar.
Webpack kullanıyorsanız yapılandırmalarınızda iki kullanıcı için farklı hedefler uygulamanızın farklı sürümleri:
- Yalnızca modülleri destekleyen tarayıcılar için bir sürüm.
- Herhangi bir eski tarayıcıda çalışan derlenmiş komut dosyası içeren bir sürüm. Çeviri için daha geniş bir tarayıcı aralığını desteklemesi gerektiğinden bu dosya daha büyük bir boyuta sahiptir.
Yorumları için Connor Clark ve Jason Miller'a teşekkürler.