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

Sürüm 9 ve sonraki sürümlerden itibaren, Firebase JavaScript modüler API'si, son yapınıza dahil edilen Firebase kodu 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 kodun kitaplıktan kaldırılmasına yönelik bu işlem, ağaç sallama olarak bilinir. Bu kodu elle kaldırmak son derece zaman alıcı ve hataya açık bir işlem olacaktır, ancak modül paketleyicileri bu kaldırma işlemini otomatik hale getirebilir.

JavaScript ekosisteminde birçok yüksek kaliteli modül paketleyici vardır. Bu kılavuz Firebase'in webpack , Rollup ve esbuild ile kullanımını ele almaya odaklanmıştır.

Başlamak

Bu kılavuz, geliştirme ortamınızda npm'nin kurulu olmasını gerektirir. npm, bağımlılıkları (kütüphaneler) kurmak ve yönetmek için kullanılır. Npm'yi yüklemek için, npm'yi otomatik olarak içeren Node.js'yi yükleyin .

Çoğu geliştirici, Node.js'yi yükledikten sonra düzgün bir şekilde kurulur. Ancak birçok geliştiricinin ortamlarını ayarlarken karşılaştığı ortak sorunlar vardır. Herhangi bir hatayla karşılaşırsanız, ortamınızda npm CLI olduğundan ve uygun izinlerin ayarlandığından emin olun ; böylece sudo komutuyla paketleri yönetici olarak yüklemenize gerek kalmaz .

package.json ve Firebase'in kurulumu

Npm'yi kurduktan sonra yerel projenizin kökünde bir package.json dosyası oluşturmanız gerekecektir. Bu dosyayı aşağıdaki npm komutuyla oluşturun:

npm init

Bu sizi gerekli bilgileri sağlayacak bir sihirbaza yönlendirecektir. 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. Genel olarak modül paketleme ve JavaScript kodu oluşturma hakkında daha fazla bilgi edinmek istiyorsanız bu, kendinizi tanımanız gereken önemli bir dosyadır. Bu kılavuzun önemli parçası "dependencies" nesnesidir. Bu nesne, yüklediğiniz kitaplığın ve kullandığı sürümün anahtar değer çiftini tutacaktır.

Bağımlılık ekleme, npm install veya npm i komutu aracılığıyla yapılır.

npm i firebase

npm i firebase çalıştırdığınızda, yükleme işlemi package.json Firebase'i bir bağımlılık olarak listeleyecek şekilde güncelleyecektir:

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

Anahtar kitaplığın adıdır ve değer ise kullanılacak sürümdür. Sürüm değeri esnektir ve çeşitli değerleri kabul edebilir. Buna anlamsal versiyonlama veya semver denir. Semver hakkında daha fazla bilgi edinmek için npm'nin anlamsal sürüm oluşturma 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 kümesi olarak çıktısı alınır. Bu iki dosya türünü ayırmak önemlidir. Modül paketleyicilerinin okuyup işlediği kod, "kaynak" kodu olarak bilinir. Çıkardıkları dosyalar yerleşik veya "dağıtım" (dağıtım) kodu olarak bilinir.

Kod tabanlarındaki yaygın bir kurulum, kaynak kodunu src adlı bir klasörde ve yerleşik kodu dist adlı bir klasörde depolamaktır.

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


- dist
 |_ bundle.js

Yukarıdaki örnek dosya yapısında, index.js hem animations.js hem de datalist.js içe aktardığını düşünün. Bir modül paketleyici kaynak kodunu işlediğinde dist klasöründe bundle.js dosyasını üretecektir. bundle.js src klasöründeki dosyaların ve içe aktarılan tüm kitaplıkların birleşimidir.

Git gibi kaynak kontrol sistemleri kullanıyorsanız, bu kodu ana depoda saklarken dist klasörünü göz ardı etmek yaygın bir durumdur.

Giriş noktaları

Modül paketleyicilerin hepsinde bir giriş noktası kavramı vardır. Uygulamanızı bir dosya ağacı gibi 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ğine tekrar bakalım.

- 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 dosyası, uygulama için gerekli tüm kodun içe aktarımını başlattığı için 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ırmaya gerek yoktur. Bu bölüm genel bir web paketi yapılandırmasını kapsar .

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

npm i webpack webpack-cli -D

Yerel projenizin kökünde webpack.config.js adlı bir dosya oluşturun 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 bağımlılık olarak kurulu olduğundan emin olun.

npm i firebase

Ardından kod tabanınızda Firebase'i başlatın. Aşağıdaki kod, Firebase'i bir giriş noktası dosyasına aktarır ve başlatır ve bir "şehir" belgesi 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, web paketi yapısını çalıştırmak için bir npm betiği eklemektir . package.json dosyasını açın ve aşağıdaki anahtar değer çiftini "scripts" nesnesine ekleyin.

  "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 dist build klasörünü kontrol edin. Paketlenmiş uygulamanızı ve bağımlılık kodunuzu içeren bundle.js adlı bir dosya içermelidir.

Web paketi yapınızı üretim için optimize etmeye ilişkin daha fazla bilgi için "mod" yapılandırma ayarına ilişkin resmi belgelerine bakın.

Firebase'i Rollup ile kullanma

Firebase uygulamaları ve Toplama için özel bir yapılandırmaya gerek yoktur. Bu bölüm genel bir Toplama yapılandırmasını kapsar.

İlk adım, Rollup'ı ve içe aktarma işlemlerini npm ile yüklenen bağımlılıklarla eşlemek için kullanılan bir eklentiyi yüklemektir.

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

Yerel projenizin kökünde rollup.config.js adlı bir dosya oluşturun 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 kod tabanınızda Firebase'i başlatın. Aşağıdaki kod, Firebase'i bir giriş noktası dosyasına aktarır ve başlatır ve bir "şehir" belgesi 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, toplama derlemesini çalıştırmak için bir npm betiği eklemektir . package.json dosyasını açın ve aşağıdaki anahtar değer çiftini "scripts" nesnesine ekleyin.

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

Toplama ç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 dist build klasörünü kontrol edin. Paketlenmiş uygulamanızı ve bağımlılık kodunuzu içeren bundle.js adlı bir dosya içermelidir.

Toplama yapınızı üretim için optimize etmeye ilişkin daha fazla bilgi edinmek üzere üretim yapılarına yönelik eklentilere ilişkin resmi belgelerine bakın.

Firebase'i esbuild ile kullanma

Firebase uygulamaları ve esbuild için özel bir yapılandırmaya gerek yoktur. 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 projenizin kökünde esbuild.config.js adlı bir dosya oluşturun 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 kod tabanınızda Firebase'i başlatın. Aşağıdaki kod, Firebase'i bir giriş noktası dosyasına aktarır ve başlatır ve bir "şehir" belgesi 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, esbuild'i çalıştırmak için bir npm betiği eklemektir . package.json dosyasını açın ve aşağıdaki anahtar değer çiftini "scripts" nesnesine ekleyin.

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

Son olarak dist build klasörünü kontrol edin. Paketlenmiş uygulamanızı ve bağımlılık kodunuzu içeren bundle.js adlı bir dosya içermelidir.

Üretim için esbuild'i optimize etme hakkında daha fazla bilgi için küçültme ve diğer optimizasyonlarla ilgili resmi belgelerine bakın.