JavaScript modülü paketleyicileri pek çok şey yapabilir, ancak özellikleri, 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 içe aktarılan kitaplık kodunuzla değiştirin.
Sürüm 9 ve sonraki sürümlerde Firebase JavaScript modüler API birlikte çalışacak şekilde optimize edilmiştir Firebase kodu miktarını azaltmak için modül paketleyicilerin optimizasyon özelliklerini dahil edilir.
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. Bunu manuel olarak kaldırmak çok zaman alır ve hataya 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 rehberi, web paketi Birleştirme ve esbuild.
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 Node.js'yi yükleyin. npm otomatik olarak ayarlanır.
Çoğu geliştirici, Node.js'yi yükledikten sonra doğru şekilde kurulum yapar. Ancak, birçok geliştiricinin uygulamalarını oluştururken karşılaştığı yaygın sorunlar bahsedeceğim. Hatalarla karşılaşırsanız ortamınızda npm KSA olduğundan emin olun ve doğru izinlere sahip olduğunuzdan emin olun. sudo komutuyla yönetici olarak paket yüklemeniz gerekmez.
package.json ve Firebase'i yükleme
npm yüklendikten sonrapackage.json
yerel projenizin kökü. 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. Bir dosyası oluşturulduğunda 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, dosya taşıma işleminin
ve paketleme hakkında daha fazla bilgi edinmek isterseniz
JavaScript kodu oluşturmayı öğreneceksiniz. Bu kılavuzun en önemli özelliği,
"dependencies" nesne algılandı. Bu nesne, kitaplığın anahtar/değer çiftini içerecek
yüklediğiniz ve kullandığı sürüm.
Bağımlılık ekleme işlemi npm install veya npm i komutu kullanılarak yapılır.
npm i firebase
npm i firebase uygulamasını çalıştırdığınızda yükleme işlemi güncellenir.
Firebase'i bağımlılık olarak listelemek için package.json:
"dependencies": {
"firebase": "^9.0.0"
},
Anahtar, kitaplığın adıdır. Değer ise kullanılacak sürümdür. İlgili içeriği oluşturmak için kullanılan version değeri esnektir ve bir dizi değeri kabul edebilir. Bu, anlamsal sürüm oluşturma veya semver'ı kullanabilirsiniz. Semver hakkında daha fazla bilgi için npm'nin anlamsal sürüm oluşturma 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 oluşturabilirsiniz. Bu iki dosya türünü ayırmak önemlidir. Modül paketleyicilerin okuduğu ve işlediği kod "kaynak" olarak bilinir. girin. İlgili içeriği oluşturmak için kullanılan oluşturdukları dosyalara "der" veya "dist" adı verilir. (dağıtım) koduna sahiptir.
Kod tabanlarında yaygın olarak kullanılan bir kurulum, kaynak kodunun src adlı bir klasörde depolanmasıdır
ve oluşturulan kodu dist adlı bir klasörde toplar.
- src
|_ index.js
|_ animations.js
|_ datalist.js
- dist
|_ bundle.js
Yukarıdaki örnek dosya yapısında, index.js işlevinin her iki
animations.js ve datalist.js. Bir modül paketleyici, kaynağı işlediğinde
bu kod, dist klasöründe bundle.js dosyasını oluşturur. bundle.js
src klasöründeki dosyalar ile içe aktarılan kitaplıkların birleşimidir
de faydalı olabilir.
Git gibi kaynak kontrol sistemlerini kullanıyorsanız
dist adlı klasör oluşturulur.
Giriş noktaları
Modül paketleyicilerin tümü bir giriş noktası kavramına sahiptir. Örneğin, bir dosya ağacı işlevi görür. Bir dosya başka bir dosyadaki kodu içe aktarır ve bu şekilde bu şekilde devam eder. Bu, bir dosyanın ağacın kökü olacağı anlamına gelir. Bu dosya yani 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ı içe aktarır. Bu giriş noktası dosyası
paketleyiciler tarafından paketleme işlemine başlamak 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ümü genel bir web paketi yapılandırmasını ele alı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 içe aktarılır ve bir giriş noktası dosyasında Firebase'i başlatır ve "şehir" uygulayacaksınız.
// 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, bir npm komut dosyası eklemek
webpack derlemesini çalıştırıyor. package.json dosyasını aç
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. Şu ada sahip bir dosya içermelidir:
Paketlenmiş uygulama ve bağımlılık kodunuzu içeren bundle.js.
Web paketi derlemenizi üretim için optimize etme hakkında daha fazla bilgi için "mod" ile ilgili resmi belgeler yapılandırma ayarını kullanın.
Firebase'i Toplayıcıyla Kullanma
Firebase uygulamaları ve birleşimi için belirli bir yapılandırma gerekmez. Bu bölümünde genel kapsamlı birleştirme yapılandırması ele alınmaktadır.
İlk adım, Rollup uygulamasını ve içe aktarmaları ve npm ile yüklenen bağımlılıkları.
npm i rollup @rollup/plugin-node-resolve -D
rollup.config.js adlı yerel projenizin kök düzeyinde bir dosya oluşturun ve
şu kodu kullanabilirsiniz:
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 içe aktarılır ve bir giriş noktası dosyasında Firebase'i başlatır ve "şehir" uygulayacaksınız.
// 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, bir npm komut dosyası eklemek
API'yi kullanabilirsiniz. package.json dosyasını aç
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. Şu ada sahip bir dosya içermelidir:
Paketlenmiş uygulama ve bağımlılık kodunuzu içeren bundle.js.
Rollup derlemenizi üretim için optimize etme hakkında daha fazla bilgi için üretim derlemelerinin eklentileri hakkında resmi dokümanları.
Firebase'i esbuild ile kullanma
Firebase uygulamaları ve esbuild için belirli bir yapılandırma gerekmez. Bu bölümü, genel yapı yapılandırmasını ele alıyor.
İ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 içe aktarılır ve bir giriş noktası dosyasında Firebase'i başlatır ve "şehir" uygulayacaksınız.
// 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, bir npm komut dosyası eklemek
esbuild'i çalıştırın. package.json dosyasını açıp ekleyin
"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. Şu ada sahip bir dosya içermelidir:
Paketlenmiş uygulama ve bağımlılık kodunuzu içeren bundle.js.
Yapıyı üretim için optimize etme hakkında daha fazla bilgi için küçültme ve diğer optimizasyonlar hakkındaki belgeleri inceleyin.