Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Firebase ile modül paketleyicileri kullanma

JavaScript modülü paketleyicileri birçok şey yapabilir, ancak en kullanışlı özelliklerinden biri kod tabanınıza harici kitaplıklar ekleme ve kullanma yeteneğidir. Modül paketleyicileri, kodunuzdaki içe aktarma yollarını okur ve uygulamaya özel kodunuzu içe aktarılan kitaplık kodunuzla birleştirir (paketler).

9 ve sonraki sürümlerden itibaren, Firebase JavaScript SDK'sı, son yapınıza dahil edilen Firebase kodunun miktarını azaltmak için modül paketleyicilerin optimizasyon özellikleriyle çalışacak şekilde optimize edilmiştir.

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

Kullanılmayan kodu bir kitaplıktan çıkarma işlemi, ağaç sallama olarak bilinir. Bu kodu elle manuel olarak kaldırmak son derece zaman alıcı ve hataya açık olacaktır, ancak modül paketleyiciler bu kaldırma işlemini otomatikleştirebilir.

JavaScript ekosisteminde birçok yüksek kaliteli modül paketleyici vardır. Bu kılavuz ile Firebase kullanarak kapsayan odaklanmıştır WebPack , Toplaması ve esbuild .

Başlamak

Bu kılavuz, geliştirme ortamınızda npm'nin kurulu olmasını gerektirir. npm, bağımlılıkları (kütüphaneleri) kurmak ve yönetmek için kullanılır. UÖM'sini yüklemek için node.js yüklemek npm otomatik içerir.

Çoğu geliştirici, Node.js'yi yükledikten sonra düzgün şekilde kurulur. Ancak, birçok geliştiricinin ortamlarını kurarken karşılaştığı yaygın sorunlar vardır. Eğer herhangi bir hata yaşarsanız, ortamınız npm CLI sahip olduğundan emin olun ve siz kurmak izinlerinin bulunduğunu bunu sudo komutuyla yönetici olarak paketleri yüklemek gerekmez .

package.json ve Firebase'i yükleme

Eğer npm yükledikten sonra bir oluşturmanız gerekecektir package.json yerel projenin kökünde dosya. Bu dosyayı aşağıdaki npm komutuyla oluşturun:

npm init

Bu, gerekli bilgileri sağlamak için sizi bir sihirbazdan geçirecektir. Dosya oluşturulduktan sonra aşağıdakine benzer görünecektir:

{
  "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": {

  }
}

Bu dosya birçok farklı şeyden sorumludur. Modül paketleme ve genel olarak JavaScript kodu oluşturma hakkında daha fazla bilgi edinmek istiyorsanız, bu önemli bir dosyadır. Bu kılavuz için önemli parçasıdır "dependencies" nesne. Bu nesne, kurduğunuz kitaplığın ve kullandığı sürümün bir anahtar değer çiftini tutacaktır.

Bağımlılıkları ekleme aracılığıyla yapılır npm install veya npm i komut.

npm i firebase

Eğer çalıştırdığınızda npm i firebase , yükleme işlemi güncelleyecek package.json bir bağımlılık olarak liste Firebase için:

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

Anahtar, kitaplığın adıdır ve değer, kullanılacak sürümdür. Sürüm değeri esnektir ve bir dizi değeri kabul edebilir. Bu, anlamsal sürüm oluşturma veya semver olarak bilinir. Semver hakkında daha fazla bilgi edinmek için semantik sürüm oluşturma hakkında UÖM'nin kılavuzuna bakın .

Kaynak ve derleme klasörleri

Yazdığınız kod bir modül paketleyici tarafından okunur ve işlenir ve ardından yeni bir dosya veya dosya grubu olarak çıktılanır. Bu iki dosya türünü ayırmak önemlidir. Modül paketleyicilerinin okuduğu ve işlediği kod, "kaynak" kodu olarak bilinir. Çıktıları dosyalar, yerleşik veya "dağıtım" (dağıtım) kodu olarak bilinir.

Kod üsleri yaygın bir kurulum bir klasör denilen mağaza kaynak koduna olan src ve adlandırılmış bir klasörde inşa kod dist .

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


- dist
 |_ bundle.js

Yukarıdaki örnek dosya yapısında, düşünün index.js ithalatı hem animations.js ve datalist.js . Bir modül paketleyici kaynak kodunu işlediğinde onu üretecek bundle.js dosyayı dist klasörüne. bundle.js dosyaların bir kombinasyonudur src ithalat yanı klasörü ve herhangi kütüphaneler.

Böyle Git gibi kaynak kontrol sistemlerini kullanıyorsanız, bunu göz ardı etmek yaygındır dist ana depoda bu kodu saklarken klasörü.

Giriş noktaları

Modül paketleyicilerin hepsinin bir giriş noktası konsepti vardır. Uygulamanızı bir dosya ağacı olarak düşünebilirsiniz. Bir dosya diğerinden kod alır ve bu böyle devam eder. Bu, bir dosyanın ağacın kökü olacağı anlamına gelir. Bu dosya giriş noktası olarak bilinir.

Önceki dosya yapısı örneğini tekrar gözden geçirelim.

- 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 o uygulama için gerekli tüm kod ithalatı başladığı için dosya giriş noktası olarak kabul edilir. Bu giriş noktası dosyası, modül paketleyicileri tarafından paketleme işlemini başlatmak için kullanılır.

Firebase'i web paketiyle kullanma

Firebase uygulamaları ve web paketi için özel bir yapılandırma gerekmez. Bu bölüm genel webpack konfigürasyonunu kapsamaktadır .

İlk adım, web paketini npm'den bir geliştirme bağımlılığı olarak kurmaktır.

npm i webpack webpack-cli -D

Yerel proje adında kökünde bir dosya oluşturun webpack.config.js ve aşağıdaki kodu ekleyin.

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',
};

Ardından, Firebase'in bir bağımlılık olarak kurulu olduğundan emin olun.

npm i firebase

Ardından Firebase'i kod tabanınızda başlatın. Aşağıdaki kod, Firebase'i bir giriş noktası dosyasına içe aktarır ve başlatır ve bir "şehir" belgesini yüklemek için Firestore Lite'ı kullanır.

// 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(),
  };
}

Bir sonraki adım olan bir npm komut dosyası eklemek webpack yapı çalıştırmak için. Aç package.json dosyası ve aşağıdaki anahtar değer çifti ekleyin "scripts" nesne.

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

Web paketini çalıştırmak ve derleme klasörünü oluşturmak için aşağıdaki komutu çalıştırın.

npm run build

Son olarak, kontrol dist inşa klasörü. Bir dosya adında içermelidir bundle.js sizin birlikte uygulama ve bağımlılık kod içerir.

Üretim için webpack yapı optimize etmek için detaylı bilgi için kendi resmi belgelere bakın "modunda" yapılandırma ayarı .

Firebase'i Toplama ile Kullanma

Firebase uygulamaları ve Toplama için özel bir yapılandırma gerekmez. Bu bölüm, genel bir Toplama yapılandırmasını kapsar.

İlk adım, Toplama'yı ve içe aktarmaları npm ile kurulan bağımlılıklara eşlemek için kullanılan bir eklentiyi kurmaktır.

npm i rollup @rollup/plugin-node-resolve -D

Yerel proje adında kökünde bir dosya oluşturun rollup.config.js ve aşağıdaki kodu ekleyin.

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()]
};

Ardından Firebase'i kod tabanınızda başlatın. Aşağıdaki kod, Firebase'i bir giriş noktası dosyasına içe aktarır ve başlatır ve bir "şehir" belgesini yüklemek için Firestore Lite'ı kullanır.

// 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(),
  };
}

Bir sonraki adım olan bir npm komut dosyası eklemek toplaması yapı çalıştırmak için. Aç package.json dosyası ve aşağıdaki anahtar değer çifti ekleyin "scripts" nesne.

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

Toplamayı çalıştırmak ve derleme klasörünü oluşturmak için aşağıdaki komutu çalıştırın.

npm run build

Son olarak, kontrol dist inşa klasörü. Bir dosya adında içermelidir bundle.js sizin birlikte uygulama ve bağımlılık kod içerir.

Üretim için Toplaması yapı optimize etmek için detaylı bilgi için resmi belgelere bakın üretim kurar için eklentilere .

Firebase'i esbuild ile kullanma

Firebase uygulamaları ve esbuild için özel bir yapılandırma gerekmez. Bu bölüm, genel bir esbuild yapılandırmasını kapsar.

İlk adım, esbuild'i bir geliştirme bağımlılığı olarak kurmaktır.

npm i esbuild -D

Yerel proje adında kökünde bir dosya oluşturun esbuild.config.js ve aşağıdaki kodu ekleyin.

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

Ardından Firebase'i kod tabanınızda başlatın. Aşağıdaki kod, Firebase'i bir giriş noktası dosyasına içe aktarır ve başlatır ve bir "şehir" belgesini yüklemek için Firestore Lite'ı kullanır.

// 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(),
  };
}

Bir sonraki adım olan bir npm komut dosyası eklemek çalıştırmak esbuild için. Aç package.json dosyası ve aşağıdaki anahtar değer çifti ekleyin "scripts" nesne.

  "scripts": {
    "build": "node ./esbuild.config.js"
  },

Son olarak, kontrol dist inşa klasörü. Bir dosya adında içermelidir bundle.js sizin birlikte uygulama ve bağımlılık kod içerir.

Üretim için esbuild optimize etmek için detaylı bilgi için resmi belgelere bakın küçültme ve diğer optimizasyonlara .