JavaScript modül paketleyiciler birçok şey yapabilir, ancak en yararlı ö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 (paket).
Firebase JavaScript modüler API, sürüm 9 ve sonraki sürümlerden itibaren 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.
*/
Kitaplıktan kullanılmayan kodları ortadan kaldırmak için uygulanan bu işlem, ağaç sallama olarak bilinir. Bu kodun elle manuel olarak kaldırılması son derece zaman alır ve hatalara açıktır ancak modül paketleyiciler bu kaldırma işlemini otomatikleştirebilir.
JavaScript ekosisteminde çok sayıda yüksek kaliteli modül paketleyici bulunur. Bu kılavuzda, Firebase'in webpack, Rollup ve esbuild ile birlikte nasıl kullanılacağı ele alınmaktadır.
Başlayın
Bu kılavuz, geliştirme ortamınızda npm'nin yüklü olmasını gerektirir. 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'yi yükledikten sonra doğru şekilde kurulum yapar. Bununla birlikte, birçok geliştiricinin ortamlarını kurarken karşılaştığı yaygın sorunlar vardır. Hatalarla karşılaşırsanız ortamınızda npm KSA'ya sahip olduğundan ve uygun izinlere sahip olduğunuzdan emin olun. Böylece paketleri sudo komutuyla yönetici olarak yüklemek zorunda kalmazsınız.
package.json ve Firebase'i yükleme
npm yüklendikten sonra yerel projenizin kök düzeyinde 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. Bu, modül paketi ve genel olarak JavaScript kodu oluşturma hakkında daha fazla bilgi edinmek istiyorsanız aşina olmanız gereken önemli bir dosyadır. Bu kılavuzdaki önemli unsur, "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 komutu kullanılarak yapılır.
npm i firebase
npm i firebase komutunu çalıştırdığınızda yükleme işlemi package.json güncellenerek Firebase'in bağımlılık olarak listelenmesi:
"dependencies": {
"firebase": "^9.0.0"
},
Anahtar, kitaplığın adıdır. Değer ise kullanılacak sürümdür. Sürüm değeri esnektir ve çeşitli değerleri kabul edebilir. Bu, anlamsal sürüm oluşturma veya semver olarak bilinir. Semver hakkında daha fazla bilgi edinmek için anlamsal sürüm oluşturma hakkındaki npm rehberine bakın.
Kaynak ve derleme klasörleri
Yazdığınız kod, bir modül paketleyici tarafından okunur ve işlenir. Ardından, yeni bir dosya veya dosya grubu olarak çıktı. Bu iki dosya türünü ayırmak önemlidir. Modül paketleyicilerin okuduğu ve işlediği kod "kaynak" kodu olarak bilinir. Oluşturdukları dosyalar, derleme kodu veya "dist" (dağıtım) kodu olarak bilinir.
Kod tabanlarında yaygın olarak yapılan bir kurulum, kaynak kodunu src adlı bir klasörde, oluşturulan kodu da 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 işlevinin hem animations.js hem de datalist.js içe aktarma işlemini gerçekleştirdiğini göz önünde bulundurun. Bir modül paketleyici kaynak kodunu işlediğinde, bundle.js dosyasını dist klasöründe oluşturur. bundle.js, src klasöründeki dosyalar ve içe aktarma işlemi kapsamındaki kitaplıkların kombinasyonudur.
Git gibi kaynak denetimi sistemleri kullanıyorsanız bu kodu ana depoya kaydederken dist klasörünü yok sayabilirsiniz.
Giriş noktaları
Modül paketleyicilerin tümü bir giriş noktası kavramına sahiptir. Uygulamanızı bir dosya ağacı gibi düşünebilirsiniz. Bir dosya, başka bir dosyadaki kodu içe aktarır ve bu şekilde 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 dönelim.
- 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ığından giriş noktası olarak kabul edilir. Bu giriş noktası dosyası, modül paketleyiciler tarafından paketleme işlemini başlatmak için kullanılır.
Firebase'i webpack ile kullanma
Firebase uygulamaları ve web paketi için belirli bir yapılandırma gerekmez. Bu bölümde genel bir web paketi yapılandırması ele alınmaktadır.
İlk adım, geliştirme bağımlılığı olarak npm'den web paketi yüklemektir.
npm i webpack webpack-cli -D
webpack.config.js adlı yerel projenizin kökünde 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, bağımlılık olarak Firebase'in yüklü 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ında içe 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, web paketi derlemesini çalıştırmak için bir npm komut dosyası eklemektir. package.json dosyasını açın ve aşağıdaki anahtar/değer çiftini "scripts" nesnesine ekleyin.
"scripts": {
"build": "webpack --mode=development"
},
Webpack'i çalıştırmak ve derleme klasörü 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ş uygulama ve bağımlılık kodunuzu içeren bundle.js adlı dosyayı içermelidir.
Web paketi derlemenizi üretim için optimize etme hakkında daha fazla bilgi edinmek için "mod" yapılandırma ayarıyla ilgili resmi belgelerine bakın.
Firebase'i Toplayıcıyla Kullanma
Firebase uygulamaları ve birleşimi için belirli bir yapılandırma gerekmez. Bu bölümde genel bir birleştirme yapılandırması açıklanmaktadı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
rollup.config.js adlı yerel projenizin kökünde 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ında içe 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, toplayıcı derlemeyi çalıştırmak için bir npm komut dosyası 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"
},
Toplayıcıyı ç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ş uygulama ve bağımlılık kodunuzu içeren bundle.js adlı dosyayı içermelidir.
Toplayıcı derlemenizi üretim için optimize etme hakkında daha fazla bilgi edinmek için üretim derlemeleri için eklentiler hakkındaki resmi dokümanlarına bakın.
Firebase'i esbuild ile kullanma
Firebase uygulamaları ve esbuild için belirli bir yapılandırma gerekmez. Bu bölümde genel bir esbuild yapılandırması ele alınmaktadır.
İlk adım, geliştirme bağımlılığı olarak esbuild yüklemektir.
npm i esbuild -D
esbuild.config.js adlı yerel projenizin kökünde 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ında içe 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 aşağıdaki anahtar/değer çiftini "scripts" nesnesine ekleyin.
"scripts": {
"build": "node ./esbuild.config.js"
},
Son olarak, dist derleme klasörünü kontrol edin. Paketlenmiş uygulama ve bağımlılık kodunuzu içeren bundle.js adlı dosyayı içermelidir.
Yapıyı üretim için optimize etme hakkında daha fazla bilgi edinmek için küçültme ve diğer optimizasyonlarla ilgili resmi belgelerini inceleyin.