JavaScript modül paketleyiciler birçok şey yapabilir ancak en kullanışlı özelliklerinden biri, kod tabanınıza harici kitaplıklar ekleme ve bunları kullanma olanağıdır. Modül paketleyiciler, kodunuzdaki içe aktarma yollarını okur ve uygulamaya özel kodunuzu içe aktarılan kitaplık kodunuzla birleştirir (paketler).
9. sürüm ve sonraki sürümlerde, Firebase JavaScript modüler API'si, son 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.
*/
Kullanılmayan kodların kitaplıktan çıkarılması işlemine ağaç sallama (tree shaking) adı verilir. Bu kodu manuel olarak kaldırmak çok zaman alır ve hatalara yol açar ancak modül paketleyiciler bu kaldırma işlemini otomatik hale getirebilir.
JavaScript ekosisteminde birçok yüksek kaliteli modül paketleyici vardır. Bu kılavuzda, Firebase'in webpack, Rollup ve esbuild ile kullanımı ele alınmaktadı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 Node.js'yi yükleyin. Node.js, npm'yi otomatik olarak içerir.
Çoğu geliştirici, Node.js'yi yükledikten sonra doğru şekilde ayarlanır. Ancak geliştiricilerin ortamlarını ayarlarken karşılaştığı yaygın sorunlar vardı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 gerekmediğinden emin olun.
package.json ve Firebase'i yükleme
npm'yi yükledikten sonra yerel projenizin kök dizininde 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 sihirbaz aracılığıyla 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 paketleme ve genel olarak JavaScript kodu oluşturma hakkında daha fazla bilgi edinmek istiyorsanız bu dosyayı incelemeniz önemlidir. Bu kılavuzdaki önemli kısım, "dependencies" nesnesidir. Bu nesne, yüklediğiniz kitaplığın ve kullandığı sürümün anahtar/değer çiftini içerir.
Bağımlılık ekleme işlemi npm install veya npm i komutuyla yapılır.
npm i firebase
npm i firebase komutunu çalıştırdığınızda yükleme işlemi, Firebase'i bağımlılık olarak listeleyecek şekilde package.json güncellenir:
"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 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 npm'nin anlamsal sürüm oluşturma hakkındaki 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 çıkış verilir. Bu iki dosya türünü ayırmanız önemlidir. Modül paketleyicilerin okuyup işlediği koda "kaynak" kodu denir. Çıktı olarak oluşturdukları dosyalar, derlenmiş veya "dist" (dağıtım) kodu olarak bilinir.
Kod tabanlarında yaygın bir kurulum, kaynak kodunu src adlı bir klasörde, derlenmiş kodu ise dist adlı bir klasörde saklamaktır.
- src
|_ index.js
|_ animations.js
|_ datalist.js
- dist
|_ bundle.js
Yukarıdaki örnek dosya yapısında, index.js öğesinin hem animations.js hem de datalist.js öğesini içe aktardığını düşünelim. 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 birleşimidir.
Git gibi kaynak denetim sistemleri kullanıyorsanız bu kodu ana depoda saklarken dist klasörünü yoksaymanız yaygın bir uygulamadır.
Giriş noktaları
Tüm modül paketleyicilerin bir giriş noktası kavramı vardır. Uygulamanızı bir dosya ağacı olarak düşünebilirsiniz. Bir dosya başka bir dosyadan 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 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 gereken tüm kodların içe aktarılmasını başlattığı için giriş noktası olarak kabul edilir. Bu giriş noktası dosyası, paketleme sürecini başlatmak için modül paketleyiciler tarafından 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 npm'den geliştirme bağımlılığı olarak yüklemektir.
npm i webpack webpack-cli -D
Yerel projenizin kök dizininde 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 yüklendiğinden emin olun.
npm i firebase
Ardından, kod tabanınızda Firebase'i başlatın. Aşağıdaki kod, bir giriş noktası dosyasında Firebase'i içe aktarıp başlatır ve "city" 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. Paketlenmiş uygulamanızı ve bağımlılık kodunuzu içeren bundle.js adlı bir dosya içermelidir.
Üretim için webpack derlemenizi optimize etme hakkında daha fazla bilgi edinmek isterseniz "mode" yapılandırma ayarıyla ilgili resmi belgelerine göz atın.
Rollup ile Firebase'i kullanma
Firebase uygulamaları ve Rollup için özel bir yapılandırma gerekmez. Bu bölümde genel bir Rollup yapılandırması ele alınmaktadır.
İlk adım, Rollup'ı ve içe aktarmaları 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 dizininde 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, bir giriş noktası dosyasında Firebase'i içe aktarıp başlatır ve "city" 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, rollup 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. Paketlenmiş uygulamanızı ve bağımlılık kodunuzu içeren bundle.js adlı bir dosya içermelidir.
Rollup derlemenizi üretim için optimize etme hakkında daha fazla bilgi edinmek üzere üretim derlemeleri için eklentilerle ilgili resmi belgelerine bakın.
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 dizininde 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, bir giriş noktası dosyasında Firebase'i içe aktarıp başlatır ve "city" 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, 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. 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 edinmek üzere küçültme ve diğer optimizasyonlar ile ilgili resmi belgelerine bakın.