Google cam kết thúc đẩy công bằng chủng tộc cho Cộng đồng người da đen. Xem cách thực hiện.

Sử dụng gói mô-đun với Firebase

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Các trình gói mô-đun JavaScript có thể làm nhiều việc, nhưng một trong những tính năng hữu ích nhất của chúng là khả năng thêm và sử dụng các thư viện bên ngoài trong cơ sở mã của bạn. Các gói mô-đun đọc các đường dẫn nhập trong mã của bạn và kết hợp (gói) mã dành riêng cho ứng dụng của bạn với mã thư viện đã nhập của bạn.

Từ phiên bản 9 trở lên, SDK JavaScript của Firebase được tối ưu hóa để hoạt động với các tính năng tối ưu hóa của các gói mô-đun nhằm giảm lượng mã Firebase được đưa vào bản dựng cuối cùng của bạn.

import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, getRedirectResult } from 'firebase/auth';

const firebaseApp = initializeApp({ /* config */ });
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => { /* check status */ });

/**
 * getRedirectResult is unused and should not be included in the code base.
 * In addition, there are many other functions within firebase/auth that are
 * not imported and therefore should not be included as well.
 */

Quá trình loại bỏ mã không sử dụng khỏi thư viện này được gọi là rung cây. Sẽ cực kỳ tốn thời gian và dễ xảy ra lỗi nếu xóa mã này theo cách thủ công bằng tay, nhưng các gói mô-đun có thể tự động hóa việc xóa này.

Có nhiều gói mô-đun chất lượng cao trong hệ sinh thái JavaScript. Hướng dẫn này tập trung vào việc sử dụng Firebase với webpack , Rollupesbuild .

Bắt đầu

Hướng dẫn này yêu cầu bạn phải cài đặt npm trong môi trường phát triển của mình. npm được sử dụng để cài đặt và quản lý các phần phụ thuộc (thư viện). Để cài đặt npm, hãy cài đặt Node.js , bao gồm npm tự động.

Hầu hết các nhà phát triển được thiết lập đúng cách sau khi họ đã cài đặt Node.js. Tuy nhiên, có những vấn đề phổ biến mà nhiều nhà phát triển gặp phải khi thiết lập môi trường của họ. Nếu bạn gặp phải bất kỳ lỗi nào, hãy đảm bảo rằng môi trường của bạn có npm CLI và bạn có các quyền thích hợp được thiết lập để bạn không phải cài đặt gói với tư cách quản trị viên bằng lệnh sudo .

package.json và cài đặt Firebase

Khi bạn đã cài đặt xong npm, bạn sẽ cần tạo một tệp package.json tại thư mục gốc của dự án cục bộ của bạn. Tạo tệp này bằng lệnh npm sau:

npm init

Thao tác này sẽ đưa bạn qua một trình hướng dẫn để cung cấp thông tin cần thiết. Khi tệp được tạo, nó sẽ trông giống như sau:

{
  "name": "your-package-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {

  }
}

Tập tin này chịu trách nhiệm cho nhiều thứ khác nhau. Đây là một tệp quan trọng để tự làm quen nếu bạn muốn tìm hiểu thêm về cách đóng gói mô-đun và xây dựng mã JavaScript nói chung. Phần quan trọng cho hướng dẫn này là đối tượng "dependencies" . Đối tượng này sẽ giữ một cặp giá trị khóa của thư viện bạn đã cài đặt và phiên bản nó đang sử dụng.

Việc thêm các phần phụ thuộc được thực hiện thông qua lệnh npm install hoặc npm i .

npm i firebase

Khi bạn chạy npm i firebase , quá trình cài đặt sẽ cập nhật package.json để liệt kê Firebase dưới dạng phụ thuộc:

  "dependencies": {
    "firebase": "^9.0.0"
  },

Chìa khóa là tên của thư viện và giá trị là phiên bản để sử dụng. Giá trị phiên bản là linh hoạt và có thể chấp nhận một loạt giá trị. Điều này được gọi là lập phiên bản ngữ nghĩa hoặc phiên bản ngữ nghĩa. Để tìm hiểu thêm về ngữ nghĩa, hãy xem hướng dẫn của npm về lập phiên bản ngữ nghĩa .

Nguồn so với thư mục xây dựng

Mã bạn viết được đọc và xử lý bởi một trình gói mô-đun, sau đó xuất ra dưới dạng tệp hoặc tập hợp tệp mới. Điều quan trọng là phải tách hai loại tệp này. Mã mà trình gói mô-đun đọc và xử lý được gọi là mã "nguồn". Các tệp mà chúng xuất ra được gọi là mã xây dựng hoặc "phân phối" (phân phối).

Một thiết lập phổ biến trong các cơ sở mã là lưu trữ mã nguồn trong một thư mục có tên là src và mã được xây dựng trong một thư mục có tên là dist .

- src
 |_ index.js
 |_ animations.js
 |_ datalist.js


- dist
 |_ bundle.js

Trong cấu trúc tệp ví dụ ở trên, hãy xem xét rằng index.js nhập cả animations.jsdatalist.js . Khi một trình gói mô-đun xử lý mã nguồn, nó sẽ tạo ra tệp bundle.js trong thư mục dist . bundle.js là sự kết hợp của các tệp trong thư mục src và bất kỳ thư viện nào cũng được nhập.

Nếu bạn đang sử dụng hệ thống kiểm soát nguồn như Git, thông thường sẽ bỏ qua thư mục dist khi lưu trữ mã này trong kho lưu trữ chính.

Các điểm nhập cảnh

Các gói mô-đun đều có khái niệm về một điểm vào. Bạn có thể coi ứng dụng của mình như một cây tập tin. Một tệp nhập mã từ tệp khác, v.v. Điều này có nghĩa là một tệp sẽ là gốc của cây. Tệp này được gọi là điểm vào.

Hãy xem lại ví dụ về cấu trúc tệp trước đó.

- src
 |_ index.js
 |_ animations.js
 |_ datalist.js


- dist
 |_ bundle.js
// src/index.js
import { animate } from './animations';
import { createList } from './datalist';

// This is not real code, but for example purposes only
const theList = createList('users/123/tasks');
theList.addEventListener('loaded', event => {
  animate(theList);
});

Tệp src/index.js được coi là điểm vào vì nó bắt đầu nhập tất cả các mã cần thiết cho ứng dụng. Tệp điểm nhập này được sử dụng bởi các gói mô-đun để bắt đầu quá trình đóng gói.

Sử dụng Firebase với webpack

Không cần cấu hình cụ thể cho các ứng dụng Firebase và gói web. Phần này bao gồm cấu hình webpack chung .

Bước đầu tiên là cài đặt webpack từ npm như một phần phụ thuộc vào sự phát triển.

npm i webpack webpack-cli -D

Tạo một tệp ở gốc của dự án cục bộ của bạn có tên là webpack.config.js và thêm mã sau.

const path = require('path');

module.exports = {
  // The entry point file described above
  entry: './src/index.js',
  // The location of the build folder described above
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // Optional and for development only. This provides the ability to
  // map the built code back to the original source format when debugging.
  devtool: 'eval-source-map',
};

Sau đó, hãy đảm bảo rằng bạn đã cài đặt Firebase làm phụ thuộc.

npm i firebase

Sau đó, khởi tạo Firebase trong cơ sở mã của bạn. Mã sau nhập và khởi tạo Firebase trong tệp điểm nhập và sử dụng Firestore Lite để tải tài liệu "thành phố".

// src/index.js
import { initializeApp } from 'firebase/app';
import { getFirestore, doc, getDoc } from 'firebase/firestore/lite';

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

async function loadCity(name) {
  const cityDoc = doc(db, `cities/${name}`);
  const snapshot = await getDoc(cityDoc);
  return {
    id: snapshot.id,
    ...snapshot.data(),
  };
}

Bước tiếp theo là thêm một tập lệnh npm để chạy bản dựng webpack. Mở tệp package.json và thêm cặp giá trị khóa sau vào đối tượng "scripts" .

  "scripts": {
    "build": "webpack --mode=development"
  },

Để chạy webpack và tạo thư mục xây dựng, hãy chạy lệnh sau.

npm run build

Cuối cùng, hãy kiểm tra thư mục dist build. Nó phải chứa một tệp có tên là bundle.js có chứa mã phụ thuộc và ứng dụng đi kèm của bạn.

Để biết thêm thông tin về cách tối ưu hóa bản dựng webpack của bạn để sản xuất, hãy xem tài liệu chính thức của họ về cài đặt cấu hình "chế độ" .

Sử dụng Firebase với bản cuộn lên

Không cần cấu hình cụ thể cho ứng dụng Firebase và Bản tổng hợp. Phần này bao gồm cấu hình tổng hợp chung.

Bước đầu tiên là cài đặt Rollup và một plugin được sử dụng để ánh xạ quá trình nhập vào các phần phụ thuộc được cài đặt bằng npm.

npm i rollup @rollup/plugin-node-resolve -D

Tạo một tệp ở gốc của dự án cục bộ của bạn có tên rollup.config.js và thêm mã sau.

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  // the entry point file described above
  input: 'src/index.js',
  // the output for the build folder described above
  output: {
    file: 'dist/bundle.js',
    // Optional and for development only. This provides the ability to
    // map the built code back to the original source format when debugging.
    sourcemap: 'inline',
    // Configure Rollup to convert your module code to a scoped function
    // that "immediate invokes". See the Rollup documentation for more
    // information: https://rollupjs.org/guide/en/#outputformat
    format: 'iife'
  },
  // Add the plugin to map import paths to dependencies
  // installed with npm
  plugins: [nodeResolve()]
};

Sau đó, khởi tạo Firebase trong cơ sở mã của bạn. Mã sau nhập và khởi tạo Firebase trong tệp điểm nhập và sử dụng Firestore Lite để tải tài liệu "thành phố".

// src/index.js
import { initializeApp } from 'firebase/app';
import { getFirestore, doc, getDoc } from 'firebase/firestore/lite';

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

async function loadCity(name) {
  const cityDoc = doc(db, `cities/${name}`);
  const snapshot = await getDoc(cityDoc);
  return {
    id: snapshot.id,
    ...snapshot.data(),
  };
}

Bước tiếp theo là thêm một tập lệnh npm để chạy bản dựng cuộn lên. Mở tệp package.json và thêm cặp giá trị khóa sau vào đối tượng "scripts" .

  "scripts": {
    "build": "rollup -c rollup.config.js"
  },

Để chạy cuộn lên và tạo thư mục xây dựng, hãy chạy lệnh sau.

npm run build

Cuối cùng, hãy kiểm tra thư mục dist build. Nó phải chứa một tệp có tên là bundle.js có chứa mã phụ thuộc và ứng dụng đi kèm của bạn.

Để biết thêm thông tin về cách tối ưu hóa bản dựng Rollup cho sản xuất, hãy xem tài liệu chính thức của họ về các plugin dành cho bản dựng sản xuất .

Sử dụng Firebase với esbuild

Không có cấu hình cụ thể cần thiết cho các ứng dụng Firebase và bản xây dựng. Phần này bao gồm một cấu hình xây dựng chung.

Bước đầu tiên là cài đặt esbuild như một phần phụ thuộc vào sự phát triển.

npm i esbuild -D

Tạo một tệp ở gốc của dự án cục bộ của bạn có tên là esbuild.config.js và thêm mã sau.

require('esbuild').build({
  // the entry point file described above
  entryPoints: ['src/index.js'],
  // the build folder location described above
  outfile: 'dist/bundle.js',
  bundle: true,
  // Replace with the browser versions you need to target
  target: ['chrome60', 'firefox60', 'safari11', 'edge20'],
  // Optional and for development only. This provides the ability to
  // map the built code back to the original source format when debugging.
  sourcemap: 'inline',
}).catch(() => process.exit(1))

Sau đó, khởi tạo Firebase trong cơ sở mã của bạn. Mã sau nhập và khởi tạo Firebase trong tệp điểm nhập và sử dụng Firestore Lite để tải tài liệu "thành phố".

// src/index.js
import { initializeApp } from 'firebase/app';
import { getFirestore, doc, getDoc } from 'firebase/firestore/lite';

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

async function loadCity(name) {
  const cityDoc = doc(db, `cities/${name}`);
  const snapshot = await getDoc(cityDoc);
  return {
    id: snapshot.id,
    ...snapshot.data(),
  };
}

Bước tiếp theo là thêm một tập lệnh npm để chạy esbuild. Mở tệp package.json và thêm cặp giá trị khóa sau vào đối tượng "scripts" .

  "scripts": {
    "build": "node ./esbuild.config.js"
  },

Cuối cùng, hãy kiểm tra thư mục dist build. Nó phải chứa một tệp có tên là bundle.js có chứa mã phụ thuộc và ứng dụng đi kèm của bạn.

Để biết thêm thông tin về cách tối ưu hóa esbuild cho sản xuất, hãy xem tài liệu chính thức của họ về việc thu nhỏ và các tối ưu hóa khác .