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

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

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

از نسخه 9 و بالاتر، API مدولار جاوا اسکریپت Firebase برای کار با ویژگی‌های بهینه‌سازی باندلرهای ماژول بهینه شده است تا مقدار کد 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.
 */

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

در اکوسیستم جاوا اسکریپت بسته‌کننده‌های ماژول با کیفیت بسیار بالایی وجود دارد. این راهنما بر روی پوشش با استفاده از 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": {

  }
}

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

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

npm i firebase

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

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

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

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

کدی که می نویسید توسط یک ماژول باندلر خوانده و پردازش می شود و سپس به عنوان یک فایل جدید یا مجموعه ای از فایل ها خروجی می شود. جدا کردن این دو نوع فایل مهم است. کدی که باندلرهای ماژول می خوانند و پردازش می کنند به عنوان کد "منبع" شناخته می شود. فایل هایی که آنها خروجی می کنند به عنوان کد ساخته شده یا "Dist" (توزیع) شناخته می شوند.

یک راه‌اندازی رایج در پایه‌های کد، ذخیره کد منبع در پوشه‌ای به نام 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 و بسته وب مورد نیاز نیست. این بخش یک پیکربندی کلی بسته وب را پوشش می دهد .

اولین مرحله نصب وب پک از 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 برای اجرای ساخت وب پک است. فایل package.json را باز کنید و جفت مقدار کلید زیر را به شی "scripts" اضافه کنید.

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

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

npm run build

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

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

استفاده از Firebase با Rollup

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

اولین قدم نصب 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()]
};

// 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 است. فایل package.json را باز کنید و جفت مقدار کلید زیر را به شی "scripts" اضافه کنید.

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

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

npm run build

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

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

// 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 برای تولید، به مستندات رسمی آنها در مورد کوچک سازی و سایر بهینه سازی ها مراجعه کنید.