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

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

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

از نسخه 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.
 */

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

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

شروع کنید

این راهنما از شما می خواهد که npm را در محیط توسعه خود نصب کنید. npm برای نصب و مدیریت وابستگی ها (کتابخانه ها) استفاده می شود. برای نصب NPM، Node.js و نصب ، که NPM به طور خودکار شامل.

اکثر توسعه دهندگان پس از نصب Node.js. به درستی تنظیم می شوند. با این حال ، مشکلات رایجی وجود دارد که بسیاری از توسعه دهندگان هنگام راه اندازی محیط خود با آن روبرو می شوند. اگر شما را به هر گونه خطا اجرا شود، مطمئن شوید محیط زیست خود را دارد CLI 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 در مورد نسخه های معنایی را ببینید .

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

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

راه اندازی مشترک در پایگاه های کد فعال است به فروشگاه کد منبع در یک پوشه به نام src و کد ساخته شده در یک پوشه به نام dist .

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


- dist
 |_ bundle.js

در ساختار به عنوان مثال فایل فوق، در نظر بگیرید که index.js واردات هر دو animations.js و datalist.js . هنگامی که یک bundler ماژول پردازش کد منبع آن را به تولید 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 عمومی .

اولین قدم این است که بسته وب را از 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 و تولید پوشه build دستور زیر را اجرا کنید.

npm run build

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

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

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

تنظیمات خاصی برای برنامه های Firebase و Rollup مورد نیاز نیست. این بخش پیکربندی 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()]
};

سپس 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"
  },

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

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 برای بارگیری سند "شهر" استفاده می کند.

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