javascript - Vue 3 için önerilen TypeScript TSConfig compilerOptions TARGET ayarı?


Bu soru, Vue 2 ve Vue CLI kullanırken birkaç kez beni şaşırtmıştı ve şimdi taze bir Vue 3.0 beta projesine başlarken tekrar.

Hatta şu anda en yeni Vue CLI sürümü 4.3.1 ile bile, TypeScript seçeneğini seçtiğinizde, verilen şablon kodda tsconfig.json dosyasında compilerOptions target olarak esnext ayarlanmıştır.

Vue 2 TypeScript Kılavuzu şunları öğretirken:

Recommended Configuration
// tsconfig.json
{
  "compilerOptions": {
    // this aligns with Vue's browser support
    "target": "es5",
    // this enables stricter inference for data properties on `this`
    "strict": true,
    // if using webpack 2+ or rollup, to leverage tree shaking:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

Şu anda Vue Next deposu esnext kullanıyor, ancak bu noktada IE11 desteği henüz hazır değil (ama bu yapılandırmayı her halükarda etkilemeyebilir)...

Vue 3 kullanırken bu derleyici hedefi için önerilen ayar ne olacaktır?

Eski tarayıcıları IE11'e kadar desteklemem gerekiyor, ancak bu özel uygulama projesinin Vue 3'ün tam sürümünü beklemek için başlangıç yayınına kadar bolca zamanı var.

Cevap #1

Vue 3 deposunun belirttiği gibi,

mevcut uygulama, çalışma zamanı ortamında yerel ES2015+ gerektirir ve henüz IE11'i desteklemez. IE11 uyumlu sürüm, RC aşamasına ulaştıktan sonra üzerinde çalışılacaktır.

Belirtildiği gibi, Vue 3'ün hedefi şu anda esnext olup modern JS özelliklerine dayanmakta ve şu anda sürekli güncellenen tarayıcılarda geliştirme amacıyla hedeflenmiş olup üretimde kullanılmak üzere tasarlanmamıştır. Vue 3, şu anda ES6 özelliği olan ve polyfill ile uygulanamayan proxy'lere dayandığı için hedef düşürülse bile eski tarayıcılarda kullanılamaz.

Mevcut Vue 3 yapısını kullanan proje, en az ortak payda olması muhtemel es2018'den daha düşük bir target'ten fayda sağlamayacaktır; nesne yayılımı, Vue 3 kod tabanında kullanılan ve polyfill yapılamayan en popüler son eklemelerden biridir. TipScript hedefi, bazı uyumluluk sorunlarının erken tespiti için downlevelIteration seçeneği etkinleştirilerek deneysel olarak es5'e düşürülebilir.

Vue 3'ün ayrı versiyonlarının eski (IE11) ve modern tarayıcılar için sürdürüleceği bekleniyor. Fark, reaktifliğin nasıl ele alındığıdır çünkü Proxy ileri seviye değişiklik tespitine izin verir ancak eski tarayıcılarda uygulanamaz. Projenin eski Vue 3 yapısı ile uyumlu olabilmesi için Vue 2 reaktivitesi için mevcut yönergeleri takip etmesi gerekir.

İlgili makaleler