این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

استفاده از باندلرهای ماژول با Firebase

بسته‌های ماژول جاوا اسکریپت می‌توانند کارهای زیادی انجام دهند، اما یکی از مفیدترین ویژگی‌های آنها، امکان اضافه کردن و استفاده از کتابخانه‌های خارجی در پایگاه کد شما است. بسته‌های ماژول، مسیرهای ورودی را در کد شما می‌خوانند و کد مخصوص برنامه شما را با کد کتابخانه ورودی شما ترکیب (بسته‌بندی) می‌کنند.

از نسخه ۹ و بالاتر، API ماژولار جاوا اسکریپت فایربیس برای کار با ویژگی‌های بهینه‌سازی بسته‌های ماژول بهینه‌سازی شده است تا میزان کد فایربیس موجود در ساخت نهایی شما کاهش یابد.

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.
 */

این فرآیند حذف کدهای استفاده نشده از یک کتابخانه، به عنوان درخت‌تکانی شناخته می‌شود. حذف دستی این کدها بسیار زمان‌بر و مستعد خطا خواهد بود، اما بسته‌های ماژول می‌توانند این حذف را خودکار کنند.

بسته‌های ماژول باکیفیت زیادی در اکوسیستم جاوااسکریپت وجود دارد. این راهنما بر پوشش استفاده از Firebase با webpack ، Rollup و esbuild تمرکز دارد.

شروع کنید

این راهنما مستلزم آن است که 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": {

  }
}

این فایل مسئول بسیاری از موارد مختلف است. اگر می‌خواهید در مورد بسته‌بندی ماژول‌ها و ساخت کد جاوا اسکریپت به طور کلی بیشتر بدانید، آشنایی با این فایل مهم است. بخش مهم این راهنما شیء "dependencies" است. این شیء یک جفت کلید-مقدار از کتابخانه‌ای که نصب کرده‌اید و نسخه‌ای که از آن استفاده می‌کند را در خود نگه می‌دارد.

اضافه کردن وابستگی‌ها از طریق دستور npm install یا npm i انجام می‌شود.

npm i firebase

وقتی npm i firebase را اجرا می‌کنید، فرآیند نصب، package.json را به‌روزرسانی می‌کند تا Firebase را به عنوان یک وابستگی فهرست کند:

  "dependencies": {
    "firebase": "^9.0.0"
  },

کلید، نام کتابخانه و مقدار، نسخه مورد استفاده است. مقدار نسخه انعطاف‌پذیر است و می‌تواند طیف وسیعی از مقادیر را بپذیرد. این به عنوان نسخه‌بندی معنایی یا semver شناخته می‌شود. برای کسب اطلاعات بیشتر در مورد semver، به راهنمای npm در مورد نسخه‌بندی معنایی مراجعه کنید .

پوشه‌های منبع در مقابل پوشه‌های ساخت

کدی که شما می‌نویسید توسط یک module bundler خوانده و پردازش می‌شود و سپس به عنوان یک فایل یا مجموعه‌ای از فایل‌ها در خروجی قرار می‌گیرد. جدا کردن این دو نوع فایل بسیار مهم است. کدی که module bundlerها می‌خوانند و پردازش می‌کنند به عنوان کد "منبع" شناخته می‌شود. فایل‌هایی که آنها خروجی می‌دهند به عنوان کد ساخته شده یا "dist" (توزیع) شناخته می‌شوند.

یک روش رایج در پایگاه‌های کد، ذخیره کد منبع در پوشه‌ای به نام src و کد ساخته شده در پوشه‌ای به نام dist است.

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


- dist
 |_ bundle.js

در ساختار فایل مثال بالا، در نظر بگیرید که index.js هم animations.js و هم datalist.js را وارد می‌کند. وقتی یک module bundler کد منبع را پردازش می‌کند، فایل 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 لازم نیست. این بخش پیکربندی کلی 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 است. فایل package.json را باز کنید و جفت کلید-مقدار زیر را به شیء "scripts" اضافه کنید.

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

برای اجرای webpack و ایجاد پوشه build، دستور زیر را اجرا کنید.

npm run build

در نهایت، پوشه dist build را بررسی کنید. این پوشه باید حاوی فایلی به نام bundle.js باشد که شامل برنامه بسته‌بندی شده و کد وابستگی شما است.

برای اطلاعات بیشتر در مورد بهینه‌سازی ساخت وب‌پک برای محیط عملیاتی، به مستندات رسمی آنها در مورد تنظیمات پیکربندی "mode" مراجعه کنید.

استفاده از فایربیس با Rollup

هیچ پیکربندی خاصی برای برنامه‌های Firebase و Rollup لازم نیست. این بخش پیکربندی کلی Rollup را پوشش می‌دهد.

اولین قدم نصب Rollup و افزونه‌ای است که برای نگاشت importها به dependencyهای نصب شده با 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()]
};

// 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

برای اطلاعات بیشتر در مورد بهینه‌سازی نسخه Rollup خود برای محیط عملیاتی، به مستندات رسمی آنها در مورد افزونه‌های مربوط به نسخه‌های عملیاتی مراجعه کنید.

استفاده از فایربیس با 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))

// 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"
  },

برای اطلاعات بیشتر در مورد بهینه‌سازی esbuild برای محیط عملیاتی، به مستندات رسمی آنها در مورد کوچک‌سازی و سایر بهینه‌سازی‌ها مراجعه کنید.

استفاده از باندلرهای ماژول با Firebase با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.