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

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

ตั้งแต่เวอร์ชัน 9 ขึ้นไป API แบบโมดูลาร์ Firebase JavaScript ได้รับการปรับให้ทำงานร่วมกับฟีเจอร์การปรับให้เหมาะสมของโมดูลบันเดิล เพื่อลดจำนวนโค้ด 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 เกี่ยวกับการกำหนดเวอร์ชันเชิงความหมาย

ซอร์สเทียบกับโฟลเดอร์บิลด์

รหัสที่คุณเขียนจะถูกอ่านและประมวลผลโดยตัวรวมโมดูล จากนั้นจึงส่งออกเป็นไฟล์ใหม่หรือชุดของไฟล์ สิ่งสำคัญคือต้องแยกไฟล์ทั้งสองประเภทนี้ออก โค้ดที่ตัวรวมโมดูลอ่านและประมวลผลเรียกว่าโค้ด "ซอร์ส" ไฟล์ที่ส่งออกเรียกว่ารหัสบิวด์หรือ "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 ส่วนนี้ครอบคลุมถึงการกำหนดค่าชุดรวมอัปเดตทั่วไป

ขั้นตอนแรกคือการติดตั้ง 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"
  },

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

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 สำหรับการผลิต โปรดดูเอกสารอย่างเป็นทางการ เกี่ยวกับการย่อขนาดและการเพิ่มประสิทธิภาพอื่นๆ