JavaScript modül paketleyicileri pek ç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 üzeri 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, Firebase'in web paketi, 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üphaneleri) 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 şekilde kurulur. Ancak, birçok geliştiricinin ortamlarını kurarken karşılaştığı yaygın sorunlar vardır. Herhangi bir hatayla karşılaşırsanız, ortamınızın npm CLI'sine sahip olduğundan ve uygun izinlere sahip olduğunuzdan emin olun, böylece paketleri yönetici olarak sudo komutuyla yüklemeniz gerekmez .
package.json ve Firebase'i yükleme
npm'yi kurduktan sonra, yerel projenizin kökünde bir package.json dosyası oluşturmanız gerekecek. 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, kendinizi tanımanız için önemli bir dosyadır. Bu kılavuzun önemli parçası "dependencies" nesnesidir. Bu nesne, kurduğunuz kitaplığın ve kullandığı sürümün bir anahtar değer çiftini tutacaktır.
Bağımlılık eklemek, npm install veya npm i komutuyla 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, 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 okunur ve işlenir ve ardından yeni bir dosya veya dosya grubu olarak çıktı alınır. Bu iki dosya türünü ayırmak önemlidir. Modül paketleyicilerinin okuyup işlediği kod, "kaynak" kodu olarak bilinir. Çıktıları dosyalar, yerleşik veya "dağıtım" (dağıtım) kodu olarak bilinir.
Kod tabanlarında 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 dosyasını 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 kitaplıkların bir birleşimidir.
Git gibi kaynak kontrol sistemleri kullanıyorsanız, bu kodu ana depoda saklarken dist klasörünü göz ardı etmek yaygındır.
Giriş noktaları
Modül paketleyicilerin hepsinde bir giriş noktası kavramı 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 dosyası, uygulama için gerekli 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 paketleyicileri tarafından 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 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, bir bağımlılık olarak Firebase'in 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(),
};
}
Sonraki adım, web paketi 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": "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 etme hakkında daha fazla bilgi için "mod" yapılandırma ayarıyla ilgili resmi belgelerine bakın.
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 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 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(),
};
}
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"
},
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, 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.
Rollup yapınızı üretim için optimize etme hakkında daha fazla bilgi için , üretim yapıları için eklentiler hakkındaki resmi belgelerine bakın.
Firebase'i esbuild ile kullanma
Firebase uygulamaları ve esbuild için özel bir yapılandırma gerekmez. Bu bölüm, genel bir ebuild 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 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(),
};
}
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.
esbuild'i üretim için optimize etme hakkında daha fazla bilgi için , küçültme ve diğer optimizasyonlarla ilgili resmi belgelerine bakın.