Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

การใช้ชุดรวมโมดูลกับ Firebase

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

กลุ่มโมดูล JavaScript สามารถทำได้หลายอย่าง แต่หนึ่งในคุณสมบัติที่มีประโยชน์ที่สุดคือความสามารถในการเพิ่มและใช้ไลบรารีภายนอกในฐานโค้ดของคุณ กลุ่มโมดูลจะอ่านเส้นทางการนำเข้าในโค้ดของคุณ และรวม (รวมกลุ่ม) โค้ดเฉพาะแอปพลิเคชันเข้ากับโค้ดไลบรารีที่นำเข้า

ตั้งแต่เวอร์ชัน 9 ขึ้นไป Firebase JavaScript SDK ได้รับการเพิ่มประสิทธิภาพให้ทำงานร่วมกับคุณลักษณะการเพิ่มประสิทธิภาพของกลุ่มโมดูล เพื่อลดจำนวนโค้ด Firebase ที่รวมอยู่ในบิลด์สุดท้ายของคุณ

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.
 */

กระบวนการกำจัดโค้ดที่ไม่ได้ใช้ออกจากไลบรารีนี้เรียกว่าการเขย่าต้นไม้ จะใช้เวลาอย่างมากและเกิดข้อผิดพลาดได้ง่ายในการลบโค้ดนี้ด้วยมือ แต่ตัวรวมโมดูลสามารถทำให้การลบนี้เป็นไปโดยอัตโนมัติ

มีกลุ่มโมดูลคุณภาพสูงจำนวนมากในระบบนิเวศ JavaScript คู่มือนี้เน้นที่การครอบคลุมการใช้ Firebase ด้วย webpack , Rollup และ esbuild

เริ่ม

คู่มือนี้กำหนดให้คุณต้องติดตั้ง npm ในสภาพแวดล้อมการพัฒนาของคุณ npm ใช้ในการติดตั้งและจัดการการพึ่งพา (ไลบรารี) ในการติดตั้ง npm ให้ ติดตั้ง Node.js ซึ่งรวมถึง npm โดยอัตโนมัติ

นักพัฒนาส่วนใหญ่ได้รับการตั้งค่าอย่างเหมาะสมเมื่อติดตั้ง Node.js แล้ว อย่างไรก็ตาม มีปัญหาทั่วไปที่นักพัฒนาหลายคนพบเจอเมื่อตั้งค่าสภาพแวดล้อม หากคุณพบข้อผิดพลาดใดๆ ตรวจสอบให้แน่ใจว่าสภาพแวดล้อมของคุณมี npm CLI และคุณได้ตั้งค่าการอนุญาตที่เหมาะสม ดังนั้นคุณ ไม่จำเป็นต้องติดตั้งแพ็คเกจในฐานะผู้ดูแลระบบด้วยคำสั่ง sudo

package.json และติดตั้ง Firebase

เมื่อคุณติดตั้ง npm แล้ว คุณจะต้องสร้างไฟล์ package.json ที่รูทของโปรเจ็กต์ในเครื่องของคุณ สร้างไฟล์นี้ด้วยคำสั่ง npm ต่อไปนี้:

npm init

การดำเนินการนี้จะนำคุณผ่านวิซาร์ดเพื่อระบุข้อมูลที่จำเป็น เมื่อสร้างไฟล์แล้ว จะมีลักษณะดังนี้:

{
  "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": {

  }
}

ไฟล์นี้มีหน้าที่รับผิดชอบหลายอย่าง นี่เป็นไฟล์สำคัญที่คุณต้องทำความคุ้นเคย หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการรวมโมดูลและการสร้างโค้ด JavaScript โดยทั่วไป สิ่งสำคัญสำหรับคู่มือนี้คือออบเจ็กต์ "dependencies" ออบเจ็กต์นี้จะเก็บคู่ค่าคีย์ของไลบรารีที่คุณได้ติดตั้งไว้และเวอร์ชันที่ใช้อยู่

การเพิ่มการพึ่งพาทำได้โดยใช้คำสั่ง npm install หรือ npm i

npm i firebase

เมื่อคุณเรียกใช้ npm i firebase ขั้นตอนการติดตั้งจะอัปเดต package.json เพื่อแสดงรายการ Firebase เป็นการพึ่งพา:

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

กุญแจสำคัญคือชื่อของไลบรารี่และค่าคือเวอร์ชันที่จะใช้ ค่าเวอร์ชันมีความยืดหยุ่นและสามารถยอมรับช่วงของค่าได้ นี้เรียกว่าการกำหนดเวอร์ชันเชิงความหมายหรือ semver หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ semver โปรดดูคำแนะนำของ npm เกี่ยวกับการกำหนดเวอร์ชันเชิงความหมาย

ซอร์ส vs โฟลเดอร์บิลด์

รหัสที่คุณเขียนจะถูกอ่านและประมวลผลโดยโมดูลบันเดิล แล้วส่งออกเป็นไฟล์ใหม่หรือชุดของไฟล์ การแยกไฟล์สองประเภทนี้ออกเป็นสิ่งสำคัญ รหัสที่กลุ่มโมดูลอ่านและประมวลผลเรียกว่ารหัส "ต้นทาง" ไฟล์ที่ส่งออกเรียกว่าโค้ดที่สร้างหรือ "dist" (แจกจ่าย)

การตั้งค่าทั่วไปในฐานโค้ดคือการจัดเก็บซอร์สโค้ดในโฟลเดอร์ชื่อ src และโค้ดที่สร้างไว้ในโฟลเดอร์ชื่อ dist

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


- dist
 |_ bundle.js

ในโครงสร้างไฟล์ตัวอย่างด้านบน ให้พิจารณาว่า index.js นำเข้าทั้ง animations.js และ datalist.js เมื่อโมดูลบันเดิลประมวลผลซอร์สโค้ด จะสร้างไฟล์ bundle.js ในโฟลเดอร์ dist bundle.js คือการรวมกันของไฟล์ในโฟลเดอร์ src และไลบรารีใดๆ ที่นำเข้าเช่นกัน

หากคุณกำลังใช้ระบบควบคุมต้นทาง เช่น Git เป็นเรื่องปกติที่จะละเว้นโฟลเดอร์ dist เมื่อจัดเก็บโค้ดนี้ในที่เก็บหลัก

จุดเริ่มต้น

ชุดรวมโมดูลทั้งหมดมีแนวคิดเกี่ยวกับจุดเริ่มต้น คุณสามารถคิดว่าแอปพลิเคชันของคุณเป็นแผนผังของไฟล์ ไฟล์หนึ่งนำเข้ารหัสจากอีกไฟล์หนึ่งเป็นต้น ซึ่งหมายความว่าไฟล์หนึ่งไฟล์จะเป็นรูทของทรี ไฟล์นี้เรียกว่าจุดเริ่มต้น

มาทบทวนตัวอย่างโครงสร้างไฟล์ก่อนหน้ากัน

- 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);
});

ไฟล์ src/index.js ถือเป็นจุดเริ่มต้น เนื่องจากเริ่มต้นการนำเข้าโค้ดที่จำเป็นทั้งหมดสำหรับแอปพลิเคชัน ไฟล์จุดเริ่มต้นนี้ถูกใช้โดยโมดูลบันเดิลเพื่อเริ่มกระบวนการรวมกลุ่ม

การใช้ Firebase กับ webpack

ไม่จำเป็นต้องมีการกำหนดค่าเฉพาะสำหรับแอป Firebase และ webpack ส่วนนี้ ครอบคลุมถึงการกำหนดค่า webpack ทั่วไป

ขั้นตอนแรกคือการติดตั้ง webpack จาก npm เป็นการพึ่งพาการพัฒนา

npm i webpack webpack-cli -D

สร้างไฟล์ที่รูทของโปรเจ็กต์ในพื้นที่ของคุณที่ชื่อ webpack.config.js และเพิ่มโค้ดต่อไปนี้

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',
};

จากนั้นตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Firebase เป็นการพึ่งพา

npm i firebase

จากนั้นเริ่มต้น Firebase ในฐานโค้ดของคุณ รหัสต่อไปนี้นำเข้าและเริ่มต้น Firebase ในไฟล์จุดเริ่มต้นและใช้ Firestore Lite เพื่อโหลดเอกสาร "เมือง"

// 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(),
  };
}

ขั้นตอนต่อไปคือการ เพิ่มสคริปต์ npm เพื่อรัน webpack build เปิดไฟล์ package.json และเพิ่มคู่ค่าคีย์ต่อไปนี้ในอ็อบเจ็กต์ "scripts"

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

ในการรัน webpack และสร้างโฟลเดอร์ build ให้รันคำสั่งต่อไปนี้

npm run build

สุดท้าย ตรวจสอบโฟลเดอร์ dist build ควรมีไฟล์ชื่อ bundle.js ซึ่งประกอบด้วยแอปพลิเคชันและโค้ดการพึ่งพาที่รวมกลุ่มไว้

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเพิ่มประสิทธิภาพการสร้าง webpack ของคุณสำหรับการผลิต โปรดดูเอกสารอย่างเป็นทางการเกี่ยวกับ การตั้งค่าการกำหนดค่า "โหมด"

การใช้ Firebase กับ Rollup

ไม่จำเป็นต้องมีการกำหนดค่าเฉพาะสำหรับแอป Firebase และชุดรวม ส่วนนี้ครอบคลุมการตั้งค่าคอนฟิกค่าสะสมทั่วไป

ขั้นตอนแรกคือการติดตั้ง Rollup และปลั๊กอินที่ใช้ในการแมปการนำเข้าไปยังการอ้างอิงที่ติดตั้งด้วย npm

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

สร้างไฟล์ที่รูทของโปรเจ็กต์ในพื้นที่ของคุณที่ชื่อ rollup.config.js และเพิ่มโค้ดต่อไปนี้

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()]
};

จากนั้นเริ่มต้น Firebase ในฐานโค้ดของคุณ รหัสต่อไปนี้นำเข้าและเริ่มต้น Firebase ในไฟล์จุดเริ่มต้นและใช้ Firestore Lite เพื่อโหลดเอกสาร "เมือง"

// 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(),
  };
}

ขั้นตอนต่อไปคือการ เพิ่มสคริปต์ npm เพื่อรันบิลด์ค่าสะสม เปิดไฟล์ package.json และเพิ่มคู่ค่าคีย์ต่อไปนี้ในอ็อบเจ็กต์ "scripts"

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

เมื่อต้องการเรียกใช้ค่าสะสมและสร้างโฟลเดอร์บิลด์ ให้เรียกใช้คำสั่งต่อไปนี้

npm run build

สุดท้าย ตรวจสอบโฟลเดอร์ dist build ควรมีไฟล์ชื่อ bundle.js ซึ่งประกอบด้วยแอปพลิเคชันและโค้ดการพึ่งพาที่รวมกลุ่มไว้

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเพิ่มประสิทธิภาพ Rollup ของคุณสำหรับการผลิต โปรดดูเอกสารประกอบอย่างเป็นทางการ เกี่ยวกับปลั๊กอินสำหรับบิล ด์ที่ใช้งานจริง

การใช้ Firebase กับ esbuild

ไม่จำเป็นต้องมีการกำหนดค่าเฉพาะสำหรับแอป Firebase และ esbuild ส่วนนี้ครอบคลุมถึงคอนฟิกูเรชัน esbuild ทั่วไป

ขั้นตอนแรกคือการติดตั้ง esbuild เป็นการพึ่งพาการพัฒนา

npm i esbuild -D

สร้างไฟล์ที่รูทของโปรเจ็กต์ในพื้นที่ของคุณที่ชื่อ esbuild.config.js และเพิ่มโค้ดต่อไปนี้

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))

จากนั้นเริ่มต้น Firebase ในฐานโค้ดของคุณ รหัสต่อไปนี้นำเข้าและเริ่มต้น Firebase ในไฟล์จุดเริ่มต้นและใช้ Firestore Lite เพื่อโหลดเอกสาร "เมือง"

// 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(),
  };
}

ขั้นตอนต่อไปคือการ เพิ่มสคริปต์ npm เพื่อเรียกใช้ esbuild เปิดไฟล์ package.json และเพิ่มคู่ค่าคีย์ต่อไปนี้ในอ็อบเจ็กต์ "scripts"

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

สุดท้าย ตรวจสอบโฟลเดอร์ dist build ควรมีไฟล์ชื่อ bundle.js ซึ่งประกอบด้วยแอปพลิเคชันและโค้ดการพึ่งพาที่รวมกลุ่มไว้

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเพิ่มประสิทธิภาพ esbuild สำหรับการผลิต โปรดดูเอกสารอย่างเป็นทางการ เกี่ยวกับการลดขนาดและการเพิ่มประสิทธิภาพอื่นๆ