I bundler di moduli JavaScript possono fare molte cose, ma una delle loro funzionalità più utili è la possibilità di aggiungere e utilizzare librerie esterne nella tua base di codice. I bundler di moduli leggono i percorsi di importazione nel codice e combinano (raggruppano) il codice specifico dell'applicazione con il codice della libreria importata.
Dalla versione 9 e successive, l'SDK JavaScript di Firebase è ottimizzato per funzionare con le funzionalità di ottimizzazione dei bundle di moduli per ridurre la quantità di codice Firebase inclusa nella build finale.
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.
*/
Questo processo di eliminazione del codice inutilizzato da una libreria è noto come scuotimento dell'albero. Sarebbe estremamente dispendioso in termini di tempo e soggetto a errori rimuovere manualmente questo codice, ma i bundler di moduli possono automatizzare questa rimozione.
Ci sono molti bundler di moduli di alta qualità nell'ecosistema JavaScript. Questa guida è incentrata sulla copertura dell'utilizzo di Firebase con webpack , Rollup ed esbuild .
Iniziare
Questa guida richiede l'installazione di npm nell'ambiente di sviluppo. npm viene utilizzato per installare e gestire le dipendenze (librerie). Per installare npm, installa Node.js , che include automaticamente npm.
La maggior parte degli sviluppatori viene configurata correttamente dopo aver installato Node.js. Tuttavia, ci sono problemi comuni in cui si imbattono molti sviluppatori durante la configurazione del proprio ambiente. Se riscontri errori, assicurati che il tuo ambiente abbia la CLI npm e di avere le autorizzazioni appropriate impostate in modo da non dover installare i pacchetti come amministratore con il comando sudo .
package.json e l'installazione di Firebase
Una volta installato npm, dovrai creare un file package.json nella radice del tuo progetto locale. Genera questo file con il seguente comando npm:
npm init
Questo ti guiderà attraverso una procedura guidata per fornire le informazioni necessarie. Una volta creato il file, sarà simile al seguente:
{
"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": {
}
}
Questo file è responsabile di molte cose diverse. Questo è un file importante con cui familiarizzare se vuoi saperne di più sul raggruppamento di moduli e sulla creazione di codice JavaScript in generale. Il pezzo importante per questa guida è l'oggetto "dependencies" . Questo oggetto conterrà una coppia chiave-valore della libreria che hai installato e la versione che sta usando.
L'aggiunta di dipendenze avviene tramite il npm install o npm i .
npm i firebase
Quando esegui npm i firebase , il processo di installazione aggiornerà package.json per elencare Firebase come dipendenza:
"dependencies": {
"firebase": "^9.0.0"
},
La chiave è il nome della libreria e il valore è la versione da utilizzare. Il valore della versione è flessibile e può accettare un intervallo di valori. Questo è noto come versionamento semantico o semver. Per ulteriori informazioni su semver, vedere la guida di npm sul controllo delle versioni semantico .
Cartelle di origine e build
Il codice che scrivi viene letto ed elaborato da un bundler di moduli e quindi emesso come nuovo file o set di file. È importante separare questi due tipi di file. Il codice letto ed elaborato dai bundler di moduli è noto come codice "sorgente". I file che emettono sono noti come codice compilato o "dist" (distribuzione).
Una configurazione comune nelle basi di codice consiste nel memorizzare il codice sorgente in una cartella denominata src e il codice compilato in una cartella denominata dist .
- src
|_ index.js
|_ animations.js
|_ datalist.js
- dist
|_ bundle.js
Nella struttura del file di esempio sopra, considera che index.js importa sia animations.js che datalist.js . Quando un bundler di moduli elabora il codice sorgente, produrrà il file bundle.js nella cartella dist . Il bundle.js è una combinazione dei file nella cartella src e anche di tutte le librerie importate.
Se si utilizzano sistemi di controllo del codice sorgente come Git, è comune ignorare la cartella dist durante la memorizzazione di questo codice nel repository principale.
Punti di ingresso
I bundle di moduli hanno tutti un concetto di punto di ingresso. Puoi pensare alla tua applicazione come a un albero di file. Un file importa il codice da un altro e così via. Ciò significa che un file sarà la radice dell'albero. Questo file è noto come punto di ingresso.
Rivisitiamo il precedente esempio di struttura di file.
- 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);
});
Il file src/index.js è considerato il punto di ingresso perché avvia l'importazione di tutto il codice necessario per l'applicazione. Questo file del punto di ingresso viene utilizzato dai bundler di moduli per iniziare il processo di raggruppamento.
Utilizzo di Firebase con webpack
Non è necessaria una configurazione specifica per le app Firebase e il webpack. Questa sezione tratta una configurazione generale del pacchetto web.
Il primo passaggio consiste nell'installare webpack da npm come dipendenza di sviluppo.
npm i webpack webpack-cli -D
Crea un file nella radice del tuo progetto locale denominato webpack.config.js e aggiungi il codice seguente.
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',
};
Quindi assicurati di aver installato Firebase come dipendenza.
npm i firebase
Quindi inizializza Firebase nella tua base di codice. Il codice seguente importa e inizializza Firebase in un file del punto di ingresso e utilizza Firestore Lite per caricare un documento "città".
// 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(),
};
}
Il passaggio successivo consiste nell'aggiungere uno script npm per eseguire la build del webpack. Aprire il file package.json e aggiungere la seguente coppia di valori chiave all'oggetto "scripts" .
"scripts": {
"build": "webpack --mode=development"
},
Per eseguire webpack e generare la cartella build, eseguire il comando seguente.
npm run build
Infine, controlla la cartella di build dist . Dovrebbe contenere un file denominato bundle.js che contiene l'applicazione in bundle e il codice di dipendenza.
Per ulteriori informazioni sull'ottimizzazione della build del tuo webpack per la produzione, consulta la documentazione ufficiale sull'impostazione di configurazione "modalità" .
Utilizzo di Firebase con Rollup
Non è necessaria una configurazione specifica per le app Firebase e Rollup. Questa sezione tratta una configurazione generale di Rollup.
Il primo passaggio consiste nell'installare Rollup e un plug-in utilizzato per mappare le importazioni alle dipendenze installate con npm.
npm i rollup @rollup/plugin-node-resolve -D
Crea un file nella radice del tuo progetto locale denominato rollup.config.js e aggiungi il codice seguente.
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()]
};
Quindi inizializza Firebase nella tua base di codice. Il codice seguente importa e inizializza Firebase in un file del punto di ingresso e utilizza Firestore Lite per caricare un documento "città".
// 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(),
};
}
Il passaggio successivo consiste nell'aggiungere uno script npm per eseguire la build cumulativa. Aprire il file package.json e aggiungere la seguente coppia di valori chiave all'oggetto "scripts" .
"scripts": {
"build": "rollup -c rollup.config.js"
},
Per eseguire rollup e generare la cartella build, eseguire il comando seguente.
npm run build
Infine, controlla la cartella di build dist . Dovrebbe contenere un file denominato bundle.js che contiene l'applicazione in bundle e il codice di dipendenza.
Per ulteriori informazioni sull'ottimizzazione della build Rollup per la produzione, consulta la documentazione ufficiale sui plug-in per le build di produzione .
Utilizzo di Firebase con esbuild
Non è necessaria una configurazione specifica per le app Firebase e l'esbuild. Questa sezione copre una configurazione generale di esbuild.
Il primo passo è installare esbuild come dipendenza di sviluppo.
npm i esbuild -D
Crea un file nella radice del tuo progetto locale chiamato esbuild.config.js e aggiungi il codice seguente.
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))
Quindi inizializza Firebase nella tua base di codice. Il codice seguente importa e inizializza Firebase in un file del punto di ingresso e utilizza Firestore Lite per caricare un documento "città".
// 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(),
};
}
Il passaggio successivo consiste nell'aggiungere uno script npm per eseguire esbuild. Apri il file package.json e aggiungi la seguente coppia di valori chiave all'oggetto "scripts" .
"scripts": {
"build": "node ./esbuild.config.js"
},
Infine, controlla la cartella di build dist . Dovrebbe contenere un file denominato bundle.js che contiene l'applicazione in bundle e il codice di dipendenza.
Per ulteriori informazioni sull'ottimizzazione di esbuild per la produzione, vedere la loro documentazione ufficiale sulla minimizzazione e altre ottimizzazioni .