Catch up on everthing we announced at this year's Firebase Summit. Learn more

استخدام حِزم الوحدات مع Firebase

يمكن لمجمّعات وحدات JavaScript القيام بالعديد من الأشياء ، ولكن إحدى ميزاتها الأكثر فائدة هي القدرة على إضافة واستخدام مكتبات خارجية في قاعدة التعليمات البرمجية الخاصة بك. تقرأ حزم الوحدات النمطية مسارات الاستيراد في التعليمات البرمجية الخاصة بك وتجمع (حزمة) التعليمات البرمجية الخاصة بالتطبيق مع كود المكتبة الذي تم استيراده.

بدءًا من الإصدار 9 والإصدارات الأحدث ، تم تحسين Firebase JavaScript SDK للعمل مع ميزات التحسين لحزم الوحدات النمطية لتقليل مقدار رمز 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 لتثبيت وإدارة التبعيات (المكتبات). لتثبيت الآلية الوقائية الوطنية، تثبيت نود.جي إس ، والذي يتضمن الآلية الوقائية الوطنية تلقائيا.

يتم إعداد معظم المطورين بشكل صحيح بمجرد قيامهم بتثبيت Node.js. ومع ذلك ، هناك مشاكل شائعة يواجهها العديد من المطورين عند إعداد بيئتهم. إذا واجهت أي أخطاء، تأكد من بيئتك لديه CLI الآلية الوقائية الوطنية وأن لديك الأذونات المناسبة اقامة لذلك كنت لم يكن لديك لتثبيت حزم كمسؤول مع الأمر سودو .

package.json وتثبيت Firebase

مرة واحدة كنت قد قمت بتثبيت الآلية الوقائية الوطنية سوف تحتاج إلى إنشاء 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، انظر دليل الآلية الوقائية الوطنية حول الإصدارات الدلالي .

المصدر مقابل إنشاء المجلدات

تتم قراءة الكود الذي تكتبه ومعالجته بواسطة مجمع الوحدات النمطية ثم يتم إخراجه كملف جديد أو مجموعة ملفات. من المهم فصل هذين النوعين من الملفات. يُعرف الكود الذي تقرأه حزم الوحدات النمطية ومعالجتها باسم الكود "المصدر". تُعرف الملفات التي ينتجونها باسم الكود المبني أو "التوزيع" (التوزيع).

A الإعداد المشترك في قواعد متاحة إلى رمز مصدر تخزينها في مجلد يسمى src ورمز بني في مجلد باسم dist .

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


- dist
 |_ bundle.js

في بنية سبيل المثال ملف أعلاه، نرى أن index.js الواردات على حد سواء animations.js و datalist.js . عندما تقوم بمعالجة محزم وحدة شفرة المصدر فإنه سيتم إنتاج bundle.js الملف في dist المجلد. و bundle.js هو مزيج من الملفات في src المجلد وأي مكتبات استيراد كذلك.

إذا كنت تستخدم أنظمة التحكم بالمصادر مثل جيت، ومن الشائع أن تجاهل 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 مع حزمة الويب

لا توجد تهيئة محددة مطلوبة لتطبيقات 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 لتحميل مستند "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(),
  };
}

الخطوة التالية هي إضافة برنامج نصي الآلية الوقائية الوطنية لتشغيل بناء webpack. فتح package.json ملف وإضافة زوج قيمة المفتاح التالي إلى "scripts" الكائن.

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

لتشغيل حزمة الويب وإنشاء مجلد الإنشاء ، قم بتشغيل الأمر التالي.

npm run build

وأخيرا، تحقق من dist مجلد بناء. وينبغي أن يتضمن ملف يسمى bundle.js يحتوي على برنامج مرفق الخاص بك والرمز التبعية.

لمزيد من المعلومات حول تحسين بناء webpack الخاص للإنتاج، راجع وثائق رسمية على "وضع" إعداد تكوين .

استخدام 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 لتحميل مستند "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(),
  };
}

الخطوة التالية هي إضافة برنامج نصي الآلية الوقائية الوطنية لتشغيل بناء تراكمي. فتح 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 لتحميل مستند "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(),
  };
}

الخطوة التالية هي إضافة برنامج نصي الآلية الوقائية الوطنية لesbuild التشغيل. فتح package.json ملف وإضافة زوج قيمة المفتاح التالي إلى "scripts" الكائن.

  "scripts": {
    "build": "node ./esbuild.config.js"
  },

وأخيرا، تحقق من dist مجلد بناء. وينبغي أن يتضمن ملف يسمى bundle.js يحتوي على برنامج مرفق الخاص بك والرمز التبعية.

لمزيد من المعلومات حول تحسين esbuild للإنتاج، راجع وثائق الرسمية على تصغير الحجم والتحسينات الأخرى .