หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

ตั้งแต่เวอร์ชัน 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.
 */

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

มี Bundler โมดูลคุณภาพสูงจำนวนมากในระบบนิเวศ JavaScript ช่วงเวลานี้ มุ่งเน้นไปที่การใช้ Firebase ร่วมกับ webpack ภาพรวม และ สร้าง

เริ่มต้นใช้งาน

คู่มือนี้กำหนดให้คุณต้องติดตั้ง npm ในสภาพแวดล้อมการพัฒนาของคุณ npm ใช้เพื่อติดตั้งและจัดการทรัพยากร Dependency (ไลบรารี) วิธีติดตั้ง 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" รายการ ออบเจ็กต์นี้จะเก็บคู่คีย์-ค่าของไลบรารี ที่คุณติดตั้งไว้และเวอร์ชันที่ใช้อยู่

การเพิ่มทรัพยากร Dependency ทำได้ผ่านคำสั่ง npm install หรือ npm i

npm i firebase

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

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

คีย์คือชื่อของไลบรารีและค่าคือเวอร์ชันที่จะใช้ version [เวอร์ชัน] นั้นยืดหยุ่นและสามารถยอมรับช่วงของค่าได้ ซึ่งเรียกว่า การกำหนดเวอร์ชันทางอรรถศาสตร์หรือการนำข้อความออก หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Semver ดูคำแนะนำของ npm เกี่ยวกับการกำหนดเวอร์ชันทางอรรถศาสตร์

โฟลเดอร์ต้นทางและการสร้าง

ระบบจะอ่านและประมวลผลโค้ดที่คุณเขียนโดย Module Bundler จากนั้นส่งออกเป็น ไฟล์ใหม่หรือชุดของไฟล์ การแยกไฟล์ 2 ประเภทนี้ออกจากกัน โค้ดที่ Bundler โมดูลอ่านและประมวลผลเรียกว่า "source" โค้ด ไฟล์ที่ส่งออกเรียกว่า "สร้าง" หรือ "Dist" (การกระจาย)

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

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


- dist
 |_ bundle.js

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

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

จุดแรกเข้า

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

ลองกลับไปดูตัวอย่างโครงสร้างไฟล์ก่อนหน้านี้

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

การใช้ Firebase กับ Webpack

โดยไม่จำเป็นต้องกำหนดค่าที่เจาะจงสำหรับแอป Firebase และ Webpack ช่วงเวลานี้ จะครอบคลุมการกำหนดค่าทั่วไปของ Webpack

ขั้นตอนแรกคือการติดตั้ง Webpack จาก npm เป็นทรัพยากร Dependency ของการพัฒนา

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 เป็นทรัพยากร Dependency แล้ว

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 เปิดไฟล์ package.json แล้วเพิ่มคู่คีย์-ค่าต่อไปนี้ลงในออบเจ็กต์ "scripts"

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

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

npm run build

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

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

การใช้ Firebase แบบควบรวม

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

ขั้นตอนแรกคือการติดตั้งรายงานและปลั๊กอินที่ใช้เพื่อแมปการนําเข้าไปยัง ทรัพยากร Dependency ที่ติดตั้งด้วย 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()]
};

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

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

การใช้ Firebase กับ esbuild

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

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

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

// 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"
  },

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