Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

שימוש באוסף מודולים עם Firebase

אוספי מודולי JavaScript יכולים לעשות הרבה דברים, אך אחת התכונות השימושיות ביותר שלהם היא היכולת להוסיף ולהשתמש בספריות חיצוניות בבסיס הקוד שלך. אוספי המודולים קוראים נתיבי ייבוא ​​בקוד שלך ומשלבים (מקבצים) את הקוד הספציפי ליישום שלך עם קוד הספרייה המיובאת שלך.

מגרסה 9 ומעלה, ה- SDK של 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 , אוסף , ו esbuild .

להתחיל

מדריך זה מחייב התקנת npm בסביבת הפיתוח שלך. npm משמש להתקנה ולניהול תלות (ספריות). כדי להתקין NPM, להתקין Node.js , הכולל NPM אוטומטי.

רוב המפתחים מוגדרים כראוי לאחר שהתקינו את Node.js. עם זאת, ישנן בעיות נפוצות שמפתחים רבים נתקלים בה בעת הגדרת סביבתם. אם תיתקל בהודעות שגיאה, לוודא בסביבה שלך יש את CLI NPM וכי יש לך את ההרשאות המתאימות להגדיר כך שאתה לא צריך להתקין חבילות כמנהל עם הפקודה 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, עיין במדריך של NPM על ניהול גרסאות סמנטי .

מקור מול תיקיות

הקוד שאתה כותב נקרא ומעובד על ידי אוסף מודולים ולאחר מכן פלט כקובץ או קבוצה חדשה. חשוב להפריד בין שני סוגי הקבצים הללו. הקוד שצורפי המודולים קוראים ומעבדים מכונה קוד "מקור". הקבצים שהם מפלטים ידועים בשם הקוד הבנוי או "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 התיקייה כאשר לאחסון קוד זה במאגר הראשי.

נקודות כניסה

לאוספי המודולים יש לכולם מושג של נקודת כניסה. אתה יכול לחשוב על היישום שלך כעץ של קבצים. קובץ אחד מייבא קוד משני וכן הלאה וכן הלאה. המשמעות היא שקובץ אחד יהיה שורש העץ. קובץ זה ידוע כנקודת הכניסה.

בואו נבקר שוב בדוגמה של מבנה הקבצים הקודם.

- 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

אין צורך בתצורה ספציפית לאפליקציות ול- webpack של Firebase. סעיף זה מכסה תצורת 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. פתח את package.json הקובץ ולהוסיף זוג ערך המפתח הבא אל "scripts" אובייקט.

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

כדי להריץ webpack וליצור את תיקיית ה- build הפעל את הפקודה הבאה.

npm run build

לבסוף, לבדוק את dist התיקייה לבנות. זה צריך להכיל בשם קובץ bundle.js המכיל יישום משולב וקוד תלות.

לקבלת מידע נוסף על אופטימיזציה לבנות webpack שלך לייצור, עיינו בתיעוד הרשמי שלהם על הגדרת התצורה של "המצב" .

שימוש ב- Firebase עם אוסף

אין צורך בתצורה ספציפית עבור אפליקציות Firebase ואוסף. סעיף זה מתייחס לתצורת אוסף כללי.

השלב הראשון הוא התקנת אוסף ותוסף המשמש למפות ייבוא ​​לתלות המותקנות באמצעות 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 התיקייה לבנות. זה צריך להכיל בשם קובץ bundle.js המכיל יישום משולב וקוד תלות.

לקבלת מידע נוסף על אופטימיזציה לבנות האוסף שלך לייצור, עיינו בתיעוד הרשמי שלהם על תוספים לייצור בונה .

שימוש ב- 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 התיקייה לבנות. זה צריך להכיל בשם קובץ bundle.js המכיל יישום משולב וקוד תלות.

לקבלת מידע נוסף על אופטימיזציה esbuild לייצור, עיין בתיעוד הרשמי שלהם על minification אופטימיזציות אחרות .