Catch up on everthing we announced at this year's Firebase Summit. Learn more

Sürüm 8'den modüler Web SDK'ya yükseltme

Şu anda Firebase Web SDK sürüm 8 veya daha eskisini kullanan uygulamalar, bu kılavuzdaki talimatları kullanarak sürüm 9'a geçmeyi düşünmelidir.

Bu kılavuz gibi paketleyici bir modül yararlanmak olacağını sürümüne 8 bildiğinizi varsayar ve WebPack veya toplaması yükseltme ve devam eden versiyonunda 9 gelişimi için.

Geliştirme ortamınızda bir modül paketleyici kullanmanız şiddetle tavsiye edilir. Birini kullanmazsanız, sürüm 9'un küçültülmüş uygulama boyutundaki ana avantajlarından yararlanamazsınız. Şunlar gerekir UÖM'sini veya iplik SDK yüklemek.

Bu kılavuzdaki yükseltme adımları, Kimlik Doğrulama ve Cloud Firestore SDK'larını kullanan hayali bir web uygulamasını temel alacaktır. Örnekler üzerinde çalışarak, desteklenen tüm Firebase Web SDK'larını yükseltmek için gereken kavramlar ve pratik adımlar konusunda uzmanlaşabilirsiniz.

Uyumluluk kitaplıkları hakkında

Firebase Web SDK sürüm 9 için iki tür kitaplık mevcuttur:

  • Modüler - Ağaç sarsan (kullanılmayan kod çıkarılmasını) kolaylaştırmak için tasarlanmış yeni bir API yüzey küçük ve hızlı mümkün olduğunca web uygulaması yapmak.
  • Compat - tek seferde Firebase tüm kodu değiştirmeden sürümüne 9'a yükseltmek için izin sürüm 8 SDK ile tam uyumlu bir tanıdık API yüzeyi. Uyumluluk kitaplıklarının, sürüm 8 muadillerine göre çok az boyut veya performans avantajı vardır veya hiç yoktur.

Bu kılavuz, yükseltmenizi kolaylaştırmak için sürüm 9 uyumlu kitaplıklardan yararlanacağınızı varsaymaktadır. Bu kitaplıklar, sürüm 9 için yeniden düzenlenen kodun yanı sıra sürüm 8 kodunu kullanmaya devam etmenizi sağlar. Bu, yükseltme işlemi boyunca çalışırken uygulamanızı daha kolay derleyip hatalarını ayıklayabileceğiniz anlamına gelir.

Firebase Web SDK'ya çok az maruz kalan uygulamalar için - örneğin, Kimlik Doğrulama API'lerine yalnızca basit bir çağrı yapan bir uygulama - sürüm 8 kodunu sürüm 9 uyumluluk kitaplıklarını kullanmadan yeniden düzenlemek pratik olabilir. Böyle bir uygulamayı yükseltiyorsanız, uyumluluk kitaplıklarını kullanmadan "sürüm 9 modüler" için bu kılavuzdaki talimatları uygulayabilirsiniz.

Yükseltme işlemi hakkında

Yükseltme işleminin her adımı, uygulamanızın kaynağını düzenlemeyi tamamlayabilmeniz ve ardından derlemeyi ve kesinti olmadan çalıştırabilmeniz için kapsamlıdır. Özetle, bir uygulamayı yükseltmek için şunları yapacaksınız:

  1. Uygulamanıza sürüm 9 kitaplıklarını ve uyumluluk kitaplıklarını ekleyin.
  2. Kodunuzdaki içe aktarma ifadelerini v9 uyumluluğuna güncelleyin.
  3. Modüler stile tek bir ürün (örneğin, Kimlik Doğrulama) için yeniden düzenleme kodu.
  4. İsteğe bağlı: Bu noktada, devam etmeden önce Kimlik Doğrulama için uygulama boyutu avantajını gerçekleştirmek için Kimlik Doğrulama uyum kitaplığını ve Kimlik Doğrulama için uyumluluk kodunu kaldırın.
  5. Modüler stilde her ürün için yeniden düzenleme işlevleri (örneğin, Cloud Firestore, FCM, vb.), tüm alanlar tamamlanana kadar derleme ve test etme.
  6. Başlatma kodunu modüler stile güncelleyin.
  7. Kalan tüm sürüm 9 uyumluluk ifadelerini ve uyumluluk kodunu uygulamanızdan kaldırın.

9 SDK sürümünü edinin

Başlamak için, npm kullanarak sürüm 9 kitaplıklarını ve kitaplıkları uyumlu hale getirin:

npm i firebase@9.5.0

# OR

yarn add firebase@9.5.0

İçe aktarmaları v9 uyumluluğuna güncelleyin

Bağımlılığınızı v8'den v9 beta'ya güncelledikten sonra kodunuzu çalışır durumda tutmak için, içe aktarma ifadelerinizi her içe aktarmanın "uyumlu" sürümünü kullanacak şekilde değiştirin. Örneğin:

Önce: sürüm 8

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

Sonra: sürüm 9 uyumluluğu

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Modüler stile yeniden düzenleme

Versiyon 8 API'ler bir nokta zincirleme ad ve servis desen dayalı olsa da, sürüm 9'un modüler yaklaşım araçları kodunuzu fonksiyonları etrafında esas organize edilecektir. Sürümünde 9'da, firebase/app paketi ve diğer paketler paketinden tüm yöntemleri içeren kapsamlı bir ihracat döndürmez. Bunun yerine, paketler bireysel işlevleri dışa aktarır.

Sürüm 9'da, hizmetler ilk argüman olarak iletilir ve işlev daha sonra gerisini yapmak için hizmetin ayrıntılarını kullanır. Kimlik Doğrulama ve Cloud Firestore API'lerine çağrıları yeniden düzenleyen iki örnekte bunun nasıl çalıştığını inceleyelim.

Örnek 1: bir Kimlik Doğrulama işlevini yeniden düzenleme

Önce: sürüm 9 uyumluluğu

Sürüm 9 uyumluluk kodu, sürüm 8 koduyla aynıdır, ancak içe aktarmalar değişmiştir.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAuthStateChanged(user => { 
  // Check for user status
});

Sonra: sürüm 9 modüler

getAuth fonksiyonu alır firebaseApp ilk parametre olarak. onAuthStateChanged işlevi, zincirli değildir auth bu sürüm 8 içinde olması gibi, örneğin; bunun yerine, süren ücretsiz fonksiyonu var auth birinci parametresi olarak.

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

Örnek 2: bir Cloud Firestore işlevini yeniden düzenleme

Önce: sürüm 9 uyumluluğu

import "firebase/compat/firestore"

const db = firebase.firestore();
db.collection("cities").where("capital", "==", true)
    .get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch((error) => {
        console.log("Error getting documents: ", error);
    });

Sonra: sürüm 9 modüler

getFirestore fonksiyonu alır firebaseApp döndürüldü ilk parametre olarak initializeApp bir önceki örnekte. Bir sorgu oluşturacak kodun sürüm 9'da nasıl çok farklı olduğuna dikkat edin; hiçbir zincirleme ve bu gibi yöntemler, query ya da where şimdi fonksiyon olarak maruz kalmaktadır.

import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";

const db = getFirestore(firebaseApp);

const q = query(collection(db, "cities"), where("capital", "==", true));

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});

Örnek 3: sürüm 8 ve sürüm 9 kod stillerini birleştirme

Yükseltme sırasında uyumluluk kitaplıklarını kullanmak, sürüm 9 için yeniden düzenlenen kodun yanı sıra sürüm 8 kodunu kullanmaya devam etmenize olanak tanır. uygulamanızı her iki kod stiliyle de başarıyla derleyin. Aynı durum, bulut Firestore gibi bir ürün içinde sürüm 8 ve sürüm 9 kod için de geçerlidir; uyumluluk paketlerini içe aktardığınız sürece yeni ve eski kod stilleri bir arada bulunabilir:

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'

const docRef = firebase.firestore().doc();
getDoc(docRef);

Uygulamanız derlenecek olsa da, uygulamanızdan uyumluluk deyimlerini ve kodunu tamamen kaldırana kadar modüler kodun uygulama boyutu avantajlarını elde edemeyeceğinizi unutmayın.

Başlatma kodunu güncelle

Yeni modüler sürüm 9 sözdizimini kullanmak için uygulamanızın başlatma kodunu güncelleyin. Uygulamanızda tüm kod üstlenmeden tamamladıktan sonra bu kodu güncellemek için önemlidir; bunun nedeni firebase.initializeApp() COMPAT ve modüler API'lerde küresel state, modüler oysa initializeApp() işlevi, modüler tek devlet başlatır.

Önce: sürüm 9 uyumluluğu

import firebase from "firebase/compat/app"

firebase.initializeApp({ /* config */ });

Sonra: sürüm 9 modüler

import { initializeApp } from "firebase/app"

const firebaseApp = initializeApp({ /* config */ });

Uyumluluk kodunu kaldır

Sürüm 9 modüler SDK boyutu yararları gerçekleştirmek için, en sonunda yukarıda gösterilen modüler tarzı bütün çağırmaları dönüştürmek ve tümünü kaldırmak gerekir import "firebase/compat/* kodunuzdan ifadeleri. İşiniz bittiğinde, hiçbir olmalı daha referanslar firebase.* genel ad veya sürüm 8 SDK tarzında başka kodu.

Pencereden uyumluluk kitaplığını kullanma

Sürüm 9 SDK yerine tarayıcının daha modülleri ile işe optimize edilmiştir window nesnesi. Kütüphanenin önceki sürümleri kullanılarak Firebase yüklenmesini ve yönetimini izin window.firebase ad. Bu, kullanılmayan kodun ortadan kaldırılmasına izin vermediğinden ileriye dönük olarak önerilmez. Ancak, JavaScript SDK compat sürümü ile çalışır window hemen modüler yükseltme yoluna başlayan etmemeyi tercih geliştiriciler için.

<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-auth-compat.js"></script>
<script>
   const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
   const db = firebaseApp.firestore();
   const auth = firebaseApp.auth();
</script>

Uyumluluk kitaplığı, başlık altındaki modüler sürüm 9 kodunu kullanır ve ona sürüm 8 SDK ile aynı API'yi sağlar; Bu size başvurmak anlamına gelir sürüm 8 API başvurusu detayları için ve sürüm 8 kod snippet'leriyle. Bu yöntem, uzun süreli kullanım için değil, tam modüler sürüm 9 kitaplığına yükseltmeye bir başlangıç ​​olarak önerilir.

Sürüm 9'un avantajları ve sınırlamaları

Tamamen modülerleştirilmiş sürüm 9, önceki sürümlere göre şu avantajlara sahiptir:

  • Sürüm 9, önemli ölçüde azaltılmış bir uygulama boyutu sağlar. Yalnızca uygulamanızın ihtiyaç duyduğu yapıları içe aktardığınız "ağaç sallama" uygulamalarına izin veren modern JavaScript Modülü biçimini benimser. Uygulamanıza bağlı olarak, sürüm 9 ile ağaç sallama, sürüm 8 kullanılarak oluşturulmuş karşılaştırılabilir bir uygulamaya göre %80 daha az kilobayt ile sonuçlanabilir.
  • Sürüm 9, devam eden özellik geliştirmeden yararlanmaya devam ederken, sürüm 8 gelecekte bir noktada dondurulacak.