מצרפי מודולי JavaScript יכולים לעשות הרבה דברים, אבל אחת התכונות הכי שימושיות שלהם היא היכולת להוסיף ולהשתמש בספריות חיצוניות בבסיס הקוד שלך. מצרפי מודולים קוראים נתיבי ייבוא בקוד שלך ומשלבים (מארזים) את הקוד הספציפי ליישום שלך עם קוד הספרייה המיובאת שלך.
מגרסה 9 ומעלה, ה-API המודולרי של Firebase JavaScript מותאם לעבוד עם תכונות האופטימיזציה של חבילות מודולים כדי להפחית את כמות הקוד של Firebase הנכלל ב-build הסופי שלך.
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. עם זאת, ישנן בעיות נפוצות שמפתחים רבים נתקלים בהן בעת הגדרת הסביבה שלהם. אם נתקלת בשגיאות כלשהן, ודא שבסביבה שלך יש את 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, עיין במדריך של npm בנושא גירסאות סמנטיות .
מקור לעומת תיקיות לבנות
הקוד שאתה כותב נקרא ומעובד על ידי מאגד מודולים ואז פלט כקובץ חדש או קבוצה של קבצים. חשוב להפריד בין שני סוגי הקבצים הללו. הקוד שמצרפי המודולים קוראים ומעבדים ידוע כקוד "מקור". הקבצים שהם מפלטים ידועים בתור הקוד הבנוי או ה"דיסט" (הפצה).
הגדרה נפוצה בבסיסי קוד היא לאחסן קוד מקור בתיקייה בשם 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 המכיל את היישום המצורף וקוד התלות שלך.
למידע נוסף על אופטימיזציה של בניית חבילת האינטרנט שלך לייצור, עיין בתיעוד הרשמי שלהם על הגדרת התצורה "מצב" .
שימוש ב-Firebase עם אוסף
אין צורך בתצורה ספציפית עבור אפליקציות 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 כדי להפעיל את ה-Rollup build. פתח את הקובץ package.json והוסף את צמד ערכי המפתח הבא לאובייקט "scripts" .
"scripts": {
"build": "rollup -c rollup.config.js"
},
כדי להפעיל אוסף וליצור את תיקיית ה-build, הפעל את הפקודה הבאה.
npm run build
לבסוף, בדוק את התיקיה dist build. הוא צריך להכיל קובץ בשם 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 build. הוא צריך להכיל קובץ בשם bundle.js המכיל את היישום המצורף וקוד התלות שלך.
למידע נוסף על אופטימיזציה של esbuild לייצור, עיין בתיעוד הרשמי שלהם על מזעור ואופטימיזציות אחרות .