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

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

بدءًا من الإصدار 9 والإصدارات الأحدث ، تم تحسين Firebase JavaScript Modular API للعمل مع ميزات التحسين الخاصة بحزم الوحدات النمطية لتقليل مقدار رمز 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 و 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 حول الإصدارات الدلالية .

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

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

الإعداد الشائع في قواعد التعليمات البرمجية هو تخزين التعليمات البرمجية المصدر في مجلد يسمى 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 مع حزمة الويب

لا توجد تهيئة محددة مطلوبة لتطبيقات Firebase وحزمة الويب. يغطي هذا القسم تكوين حزمة الويب العامة .

الخطوة الأولى هي تثبيت 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. افتح ملف 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(),
  };
}

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

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

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

npm run build

أخيرًا ، تحقق من مجلد إنشاء dist . يجب أن يحتوي على ملف يسمى 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 . يجب أن يحتوي على ملف يسمى bundle.js يحتوي على التطبيق المجمّع ورمز التبعية.

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