استخدام أدوات حزم الوحدات مع 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، الدمج بناء

البدء

يتطلب هذا الدليل تثبيت npm في بيئة التطوير. يُستخدم npm لتثبيت التبعيات وإدارتها (المكتبات). لتثبيت npm، تثبيت Node.js، الذي يتضمن npm تلقائيًا.

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

// 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 وإنشاء مجلد إنشاء، شغّل الأمر التالي.

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 من خلال الإنشاء

ما مِن حاجة إلى ضبط إعدادات محدَّدة لتطبيقات Firebase وإنشاؤها. هذا النمط تهيئة عامة لبناء البنية التحتية.

الخطوة الأولى هي تثبيت 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 الذي يحتوي على التطبيق المجمّع ورمز التبعية.

لمزيد من المعلومات حول تحسين عملية الإنشاء للإنتاج، يُرجى الاطّلاع على الصفحة الرسمية مستندات حول تصغير البيانات والتحسينات الأخرى.