JavaScript modülü paketleyicileri birçok şey yapabilir ancak en kullanışlı özelliklerinden biri, kod tabanınıza harici kitaplıklar ekleyip kullanabilme özelliğidir. Modül birleyiciler, kodunuzdaki içe aktarma yollarını okur ve uygulamaya özgü kodunuzu içe aktarılan kitaplık kodunuzla birleştirir (birleştirir).
9 ve sonraki sürümlerde Firebase JavaScript modüler API'si, nihai derlemenize 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.
*/
Bir kitaplıktan kullanılmayan kodun kaldırıldığı bu işleme ağaç sallama denir. Bu kodu manuel olarak kaldırmak son derece zaman alıcı ve hatalara açık bir işlemdir 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ılavuzda, Firebase'i webpack, Rollup ve esbuild ile kullanmaya odaklanılmıştır.
Başlayın
Bu kılavuzda, geliştirme ortamınızda npm'nin yüklü olması gerekir. npm, bağımlılıkları (kitaplıklar) yüklemek 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'i yükledikten sonra gerekli ayarları yapmış olur. Ancak birçok geliştirici, ortamlarını kurarken sık karşılaşılan sorunlarla karşılaşır. Herhangi bir hatayla karşılaşırsanız ortamınızda npm CLI'nin bulunduğundan ve paketleri sudo komutuyla yönetici olarak yüklemeniz gerekmemesi için uygun izinleri ayarladığınızdan emin olun.
package.json ve Firebase'i yükleme
npm'yi yükledikten sonra yerel projenizin kökünde bir package.json
dosyası oluşturmanız gerekir. Aşağıdaki npm komutuyla bu dosyayı oluşturun:
npm init
Bu işlem, gerekli bilgileri sağlamanız için sizi bir sihirbaza yönlendirir. Dosya oluşturulduktan sonra aşağıdaki gibi görünür:
{
"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 birleştirme ve genel olarak JavaScript kodu oluşturma hakkında daha fazla bilgi edinmek istiyorsanız bu dosyayı incelemeniz önemlidir. 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 içerir.
Bağımlılıklar npm install
veya npm i
komutu aracılığıyla eklenir.
npm i firebase
npm i firebase
'yi çalıştırdığınızda yükleme işlemi, Firebase'i bağımlılık olarak listelemek için package.json
dosyasını günceller:
"dependencies": {
"firebase": "^9.0.0"
},
Anahtar, kitaplığın adı, değer ise kullanılacak sürümdür. Sürüm değeri esnektir ve çeşitli değerler kabul edebilir. Bu, semantik sürümleme veya semver olarak bilinir. Semver hakkında daha fazla bilgi edinmek için npm'nin semantik sürüm oluşturma kılavuzuna bakın.
Kaynak ve derleme klasörleri
Yazdığınız kod, bir modül paketleyici tarafından okunup işlenir ve ardından yeni bir dosya veya dosya grubu olarak oluşturulur. Bu iki dosya türünü ayırmak önemlidir. Modül paketleyicilerin okuyup işlediği kod "kaynak" kod olarak bilinir. Bu komutların oluşturduğu dosyalar derlenmiş veya "dist" (dağıtım) kodu olarak bilinir.
Kod tabanlarında yaygın olarak kullanılan bir kurulum, kaynak kodu src
adlı bir klasörde, derlenmiş kodu ise 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
'in hem animations.js
hem de datalist.js
dosyalarını içe aktardığını varsayalım. Bir modül paketleyici, kaynak kodu işlediğinde dist
klasöründe bundle.js
dosyasını oluşturur. bundle.js
, src
klasöründeki dosyaların ve içe aktarılan kitaplıkların bir birleşimidir.
Git gibi kaynak denetimi sistemleri kullanıyorsanız bu kodu ana depoda depolarken dist
klasörünün yoksayılması yaygın bir durumdur.
Giriş noktaları
Modül paketleyicilerin hepsinin bir giriş noktası kavramı vardır. Uygulamanızı bir dosya ağacı olarak düşünebilirsiniz. Bir dosya diğerinden kod içe aktarı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 göz atalı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 gereken tüm kodun içe aktarılmasına başladığından giriş noktası olarak kabul edilir. Bu giriş noktası dosyası, modül birleştirme araçları tarafından birleştirme sürecini başlatmak için kullanılır.
Firebase'i webpack ile kullanma
Firebase uygulamaları ve webpack için özel bir yapılandırma gerekmez. Bu bölümde genel bir webpack yapılandırması ele alınmaktadır.
İlk adım, webpack'i geliştirme bağımlılığı olarak npm'den yüklemektir.
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'i bağımlı olarak yüklediğinizden 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ıp başlatır ve "ş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(),
};
}
Sonraki adım, webpack derlemesini çalıştırmak için bir npm komut dosyası eklemektir. package.json
dosyasını açın ve "scripts"
nesnesine aşağıdaki anahtar/değer çiftini ekleyin.
"scripts": {
"build": "webpack --mode=development"
},
Webpack'i ç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
derleme klasörünü kontrol edin. Bu klasör, paketlenmiş uygulamanızı ve bağımlılık kodunuzu içeren bundle.js
adlı bir dosya içermelidir.
Webpack derlemenizi üretim için optimize etme hakkında daha fazla bilgi için "mod" yapılandırma ayarı ile ilgili resmi dokümanlarına bakın.
Firebase'i birleştirme ile kullanma
Firebase uygulamaları ve birleştirme için özel bir yapılandırma gerekmez. Bu bölümde genel bir birleştirme yapılandırması ele alınmaktadır.
İlk adım, Rollup'u 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ıp başlatır ve "ş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, birleştirme derlemesini çalıştırmak için bir npm komut dosyası eklemektir. package.json
dosyasını açın ve "scripts"
nesnesine aşağıdaki anahtar/değer çiftini ekleyin.
"scripts": {
"build": "rollup -c rollup.config.js"
},
Toplama işlemini ç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
derleme klasörünü kontrol edin. Bu klasör, paketlenmiş uygulamanızı ve bağımlılık kodunuzu içeren bundle.js
adlı bir dosya içermelidir.
Birleştirme derlemenizi üretim için optimize etme hakkında daha fazla bilgi için üretim derlemeleri için eklentiler hakkındaki resmi dokümanları inceleyin.
Firebase'i esbuild ile kullanma
Firebase uygulamaları ve esbuild için özel bir yapılandırma gerekmez. Bu bölümde genel bir esbuild yapılandırması ele alınmaktadır.
İlk adım, esbuild'i geliştirme bağımlılığı olarak yüklemektir.
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ıp başlatır ve "ş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(),
};
}
Sonraki adım, esbuild'i çalıştırmak için bir npm komut dosyası eklemektir. package.json
dosyasını açın ve "scripts"
nesnesine aşağıdaki anahtar/değer çiftini ekleyin.
"scripts": {
"build": "node ./esbuild.config.js"
},
Son olarak dist
derleme klasörünü kontrol edin. Bu klasör, paketlenmiş uygulamanızı ve bağımlılık kodunuzu içeren bundle.js
adlı bir dosya içermelidir.
esbuild'i üretim için optimize etme hakkında daha fazla bilgi için küçültme ve diğer optimizasyonlarla ilgili resmi belgeleri inceleyin.