שימוש ב-bundleers של מודולים עם 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.
 */

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

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

תיקיות מקור לעומת תיקיות build

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

// 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 לייצור זמין בתיעוד הרשמי בנושא הגדרת התצורה 'mode'.

שימוש ב-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 כדי לטעון מסמך 'city'.

// 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 להפעלת ה-rollup build. פותחים את הקובץ package.json ומוסיפים את צמד המפתח/ערך הבא לאובייקט "scripts".

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

כדי להריץ את Rollup וליצור את תיקיית ה-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 כדי לטעון מסמך 'city'.

// 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 לייצור זמין במסמכים הרשמיים על מזעור ואופטימיזציות אחרות.