Các ứng dụng hiện đang sử dụng bất kỳ API web Firebase được đặt tên nào, từ các thư viện compat trở lại phiên bản 8 hoặc cũ hơn, nên xem xét việc di chuyển sang API mô-đun bằng cách sử dụng các hướng dẫn trong hướng dẫn này.
Hướng dẫn này giả định rằng bạn đã quen thuộc với API không gian đặt tên và bạn sẽ tận dụng gói mô-đun chẳng hạn như webpack hoặc Rollup để nâng cấp và phát triển ứng dụng mô-đun đang diễn ra.
Bạn nên sử dụng gói mô-đun trong môi trường phát triển của mình. Nếu không sử dụng, bạn sẽ không thể tận dụng các lợi ích chính của API mô-đun trong việc giảm kích thước ứng dụng. Bạn sẽ cần npm hoặc yarn để cài đặt SDK.
Các bước nâng cấp trong hướng dẫn này sẽ dựa trên một ứng dụng web tưởng tượng sử dụng SDK xác thực và Cloud Firestore SDK. Bằng cách làm việc qua các ví dụ, bạn có thể nắm vững các khái niệm và các bước thực hành cần thiết để nâng cấp tất cả các SDK web Firebase được hỗ trợ.
Giới thiệu về các thư viện không gian tên ( compat )
Có hai loại thư viện có sẵn cho Firebase Web SDK:
- Mô-đun - một bề mặt API mới được thiết kế để hỗ trợ chuyển đổi dạng cây (loại bỏ mã không sử dụng) để làm cho ứng dụng web của bạn nhỏ và nhanh nhất có thể.
- Không gian được đặt tên (
compat) - một bề mặt API quen thuộc hoàn toàn tương thích với các phiên bản SDK cũ hơn, cho phép bạn nâng cấp mà không cần thay đổi tất cả mã Firebase cùng một lúc. Các thư viện tương thích có ít hoặc không có lợi thế về kích thước hoặc hiệu suất so với các đối tác không gian tên của chúng.
Hướng dẫn này giả định rằng bạn sẽ tận dụng các thư viện compat để hỗ trợ việc nâng cấp của mình. Các thư viện này cho phép bạn tiếp tục sử dụng mã được đặt tên cùng với mã được tái cấu trúc cho API mô-đun. Điều này có nghĩa là bạn có thể biên dịch và gỡ lỗi ứng dụng của mình dễ dàng hơn khi bạn thực hiện quy trình nâng cấp.
Đối với các ứng dụng có mức độ tiếp xúc rất nhỏ với SDK web Firebase—ví dụ: một ứng dụng chỉ thực hiện lệnh gọi đơn giản tới API xác thực—có thể thực tế là tái cấu trúc mã không gian tên cũ hơn mà không cần sử dụng thư viện tương thích. Nếu đang nâng cấp một ứng dụng như vậy, bạn có thể làm theo hướng dẫn trong hướng dẫn này về "API mô-đun" mà không cần sử dụng thư viện tương thích.
Về quá trình nâng cấp
Mỗi bước của quy trình nâng cấp được sắp xếp theo phạm vi để bạn có thể hoàn thành việc chỉnh sửa nguồn cho ứng dụng của mình, sau đó biên dịch và chạy ứng dụng mà không bị gián đoạn. Tóm lại, đây là những gì bạn sẽ làm để nâng cấp ứng dụng:
- Thêm thư viện mô-đun và thư viện compat vào ứng dụng của bạn.
- Cập nhật câu lệnh nhập trong mã của bạn để so sánh.
- Tái cấu trúc mã cho một sản phẩm (ví dụ: Xác thực) theo kiểu mô-đun.
- Tùy chọn: tại thời điểm này, hãy xóa thư viện tương thích Xác thực và mã tương thích cho Xác thực để nhận ra lợi ích về kích thước ứng dụng cho Xác thực trước khi tiếp tục.
- Tái cấu trúc các chức năng cho từng sản phẩm (ví dụ: Cloud Firestore, FCM, v.v.) theo kiểu mô-đun, biên dịch và thử nghiệm cho đến khi tất cả các khu vực hoàn tất.
- Cập nhật mã khởi tạo theo kiểu mô-đun.
- Xóa tất cả các câu lệnh tương thích và mã tương thích còn lại khỏi ứng dụng của bạn.
Nhận phiên bản mới nhất của SDK
Để bắt đầu, hãy lấy các thư viện mô-đun và thư viện compat bằng npm:
npm i firebase@10.3.1 # OR yarn add firebase@10.3.1
Cập nhật nhập vào compat
Để giữ cho mã của bạn hoạt động sau khi cập nhật các thành phần phụ thuộc, hãy thay đổi câu lệnh nhập của bạn để sử dụng phiên bản "tương thích" của mỗi lần nhập. Ví dụ:
Trước: phiên bản 8 hoặc cũ hơn
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
Sau: so sánh
// compat packages are API compatible with namespaced code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
Tái cấu trúc theo kiểu mô-đun
Mặc dù các API không gian đặt tên dựa trên không gian tên và mẫu dịch vụ được xâu chuỗi theo dấu chấm, cách tiếp cận theo mô-đun có nghĩa là mã của bạn sẽ được tổ chức chủ yếu xung quanh các chức năng . Trong API mô-đun, gói firebase/app và các gói khác không trả lại bản xuất toàn diện có chứa tất cả các phương thức từ gói. Thay vào đó, các gói xuất các chức năng riêng lẻ.
Trong API mô-đun, các dịch vụ được chuyển làm đối số đầu tiên và sau đó, hàm sẽ sử dụng các chi tiết của dịch vụ để thực hiện phần còn lại. Hãy xem xét cách thức hoạt động của tính năng này trong hai ví dụ tái cấu trúc lệnh gọi đến API Xác thực và Cloud Firestore.
Ví dụ 1: tái cấu trúc chức năng Xác thực
Trước: tương thích
Mã compat giống với mã được đặt tên, nhưng quá trình nhập đã thay đổi.
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
const auth = firebase.auth();
auth.onAuthStateChanged(user => {
// Check for user status
});
Sau: mô-đun
Hàm getAuth lấy firebaseApp làm tham số đầu tiên. Hàm onAuthStateChanged không được xâu chuỗi từ phiên bản auth như trong API được đặt tên; thay vào đó, nó là một hàm miễn phí lấy auth làm tham số đầu tiên.
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
Cập nhật xử lý phương thức Auth getRedirectResult
API mô-đun giới thiệu một thay đổi đột phá trong getRedirectResult . Khi không có thao tác chuyển hướng nào được gọi, API mô-đun trả về null trái ngược với API không gian đặt tên, trả về UserCredential với người dùng null .
Trước: tương thích
const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
return null;
}
return result;
Sau: mô-đun
const result = await getRedirectResult(auth);
// Provider of the access token could be Facebook, Github, etc.
if (result === null || provider.credentialFromResult(result) === null) {
return null;
}
return result;
Ví dụ 2: tái cấu trúc chức năng Cloud Firestore
Trước: tương thích
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);
});
Sau: mô-đun
Hàm getFirestore lấy firebaseApp làm tham số đầu tiên, tham số này được trả về từ initializeApp trong một ví dụ trước đó. Lưu ý cách mã để tạo truy vấn rất khác trong API mô-đun; không có chuỗi và các phương thức như query hoặc where hiện được hiển thị dưới dạng các hàm miễn phí.
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());
});
Cập nhật tham chiếu đến Firestore DocumentSnapshot.exists
API mô-đun giới thiệu một thay đổi đột phá trong đó thuộc tính firestore.DocumentSnapshot.exists đã được thay đổi thành một phương thức . Chức năng về cơ bản là giống nhau (kiểm tra xem tài liệu có tồn tại hay không) nhưng bạn phải cấu trúc lại mã của mình để sử dụng phương pháp mới hơn như được hiển thị:
Trước:tương thích
if (snapshot.exists) {
console.log("the document exists");
}
Sau: mô-đun
if (snapshot.exists()) {
console.log("the document exists");
}
Ví dụ 3: kết hợp các kiểu mã mô-đun và không gian tên
Việc sử dụng các thư viện tương thích trong quá trình nâng cấp cho phép bạn tiếp tục sử dụng mã được đặt tên cùng với mã được tái cấu trúc cho API mô-đun. Điều này có nghĩa là bạn có thể giữ mã được đặt tên hiện có cho Cloud Firestore trong khi tái cấu trúc mã Xác thực hoặc mã SDK Firebase khác theo kiểu mô-đun và vẫn biên dịch thành công ứng dụng của bạn bằng cả hai kiểu mã. Điều này cũng đúng đối với mã API mô-đun và không gian đặt tên trong một sản phẩm, chẳng hạn như Cloud Firestore; các kiểu mã mới và cũ có thể cùng tồn tại, miễn là bạn đang nhập các gói compat:
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'
const docRef = firebase.firestore().doc();
getDoc(docRef);
Hãy nhớ rằng, mặc dù ứng dụng của bạn sẽ biên dịch, nhưng bạn sẽ không nhận được lợi ích về kích thước ứng dụng của mã mô-đun cho đến khi bạn xóa hoàn toàn các câu lệnh compat và mã khỏi ứng dụng của mình.
Cập nhật mã khởi tạo
Cập nhật mã khởi tạo ứng dụng của bạn để sử dụng cú pháp mô-đun. Điều quan trọng là phải cập nhật mã này sau khi bạn đã hoàn tất việc tái cấu trúc tất cả mã trong ứng dụng của mình; điều này là do firebase.initializeApp() khởi tạo trạng thái chung cho cả API tương thích và mô-đun, trong khi chức năng initializeApp() mô-đun chỉ khởi tạo trạng thái cho mô-đun.
Trước: tương thích
import firebase from "firebase/compat/app"
firebase.initializeApp({ /* config */ });
Sau: mô-đun
import { initializeApp } from "firebase/app"
const firebaseApp = initializeApp({ /* config */ });
Xóa mã tương thích
Để nhận ra lợi ích về kích thước của API mô-đun, cuối cùng bạn nên chuyển đổi tất cả các lệnh gọi sang kiểu mô-đun được hiển thị ở trên và xóa tất cả các câu lệnh import "firebase/compat/* khỏi mã của bạn. Khi bạn hoàn tất, sẽ không còn tham chiếu nào nữa đến không gian tên toàn cầu firebase.* hoặc bất kỳ mã nào khác theo kiểu API không gian đặt tên.
Sử dụng thư viện compat từ window
API mô-đun được tối ưu hóa để hoạt động với các mô-đun thay vì đối tượng window của trình duyệt. Các phiên bản trước của thư viện cho phép tải và quản lý Firebase bằng cách sử dụng không gian tên window.firebase . Điều này không được khuyến nghị trong tương lai vì nó không cho phép loại bỏ mã không sử dụng. Tuy nhiên, phiên bản tương thích của SDK JavaScript hoạt động với window dành cho các nhà phát triển không muốn bắt đầu ngay lộ trình nâng cấp mô-đun.
<script src="https://www.gstatic.com/firebasejs/10.3.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.3.1/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.3.1/firebase-auth-compat.js"></script>
<script>
const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
</script>
Thư viện tương thích sử dụng mã mô-đun dưới mui xe và cung cấp cho nó API giống như API được đặt tên; điều này có nghĩa là bạn có thể tham khảo tham chiếu API được đặt tên và các đoạn mã được đặt tên để biết chi tiết. Phương pháp này không được khuyến nghị sử dụng lâu dài, mà là bước khởi đầu để nâng cấp lên thư viện mô-đun đầy đủ.
Lợi ích và hạn chế của SDK mô-đun
SDK được mô đun hóa hoàn toàn có những ưu điểm sau so với các phiên bản trước:
- SDK mô-đun cho phép kích thước ứng dụng giảm đáng kể. Nó áp dụng định dạng Mô-đun JavaScript hiện đại, cho phép thực hành "rung chuyển cây" trong đó bạn chỉ nhập các thành phần lạ mà ứng dụng của bạn cần. Tùy thuộc vào ứng dụng của bạn, tính năng rung cây bằng SDK mô-đun có thể giảm 80% kilobyte so với ứng dụng tương đương được tạo bằng API không gian đặt tên.
- SDK mô-đun sẽ tiếp tục được hưởng lợi từ quá trình phát triển tính năng đang diễn ra, trong khi API không gian đặt tên thì không.