Catch up on everything we announced at this year's Firebase Summit. Learn more

Utilizzo di bundle di moduli con Firebase

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 importato.

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 incluso 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 a mano, ma i bundler di moduli possono automatizzare questa rimozione.

Ci sono molti bundler di moduli di alta qualità nell'ecosistema JavaScript. Questa guida è focalizzata sulla copertura utilizzando Firebase con webpack , cumulativo , e 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, installare Node.js , che comprende NPM automaticamente.

La maggior parte degli sviluppatori viene configurata correttamente dopo aver installato Node.js. Tuttavia, ci sono problemi comuni che molti sviluppatori incontrano durante la configurazione del loro ambiente. Se si esegue in eventuali errori, assicurarsi che l'ambiente ha la CLI NPM e di disporre delle autorizzazioni appropriate allestiti in modo da non dover installare i pacchetti come amministratore con il comando sudo .

package.json e installazione di Firebase

Una volta che avete installato NPM è necessario creare un package.json file alla radice del proprio progetto locale. Genera questo file con il seguente comando npm:

npm init

Questo ti porterà 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 è il "dependencies" oggetto. Questo oggetto conterrà una coppia chiave-valore della libreria che hai installato e della versione che sta utilizzando.

Aggiunta di dipendenze avviene attraverso il npm install o npm i comandi.

npm i firebase

Quando si esegue npm i firebase , il processo di installazione aggiornerà package.json alla lista 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, consultare la guida di NPM su delle versioni semantica .

Cartelle di origine e di compilazione

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 che i bundler di moduli leggono ed elaborano è noto come codice "sorgente". I file che emettono sono conosciuti come il codice costruito o "dist" (distribuzione).

Una situazione comune in basi di codice è quello di memorizzare il codice sorgente in una cartella denominata src e il codice costruito in una cartella denominata dist .

- src
 |_ index.js
 |_ animations.js
 |_ datalist.js


- dist
 |_ bundle.js

Nella struttura ad esempio file di cui sopra, si consideri che index.js importazioni sia animations.js e datalist.js . Quando un bundler modulo elabora il codice sorgente produrrà il bundle.js file nella dist cartella. Le bundle.js è una combinazione di file nella src cartella e tutte le librerie l'importazione pure.

Se si utilizza i sistemi di controllo source come Git, è comune a ignorare il dist cartella quando la memorizzazione di questo codice nel repository principale.

Punti di ingresso

I bundler di moduli hanno tutti un concetto di punto di ingresso. Puoi pensare alla tua applicazione come 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 dei 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);
});

Lo src/index.js file è considerato il punto di ingresso perché inizia 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 e il webpack Firebase. Questa sezione copre una configurazione generale webpack .

Il primo passo è installare webpack da npm come dipendenza di sviluppo.

npm i webpack webpack-cli -D

Creare un file alla radice del proprio progetto denominato locali webpack.config.js e aggiungere il seguente codice.

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 avere Firebase installato 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 passo successivo è quello di aggiungere uno script NPM per eseguire la compilazione webpack. Aprire il package.json di file e aggiungere il seguente coppia di valori chiave per la "scripts" oggetto.

  "scripts": {
    "build": "webpack --mode=development"
  },

Per eseguire webpack e generare la cartella build, esegui il seguente comando.

npm run build

Infine, controllare la dist cartella di compilazione. Dovrebbe contenere un file denominato bundle.js che contiene l'applicazione in bundle e il codice di dipendenza.

Per ulteriori informazioni su come ottimizzare il vostro accumulo webpack per la produzione, vedere la loro documentazione ufficiale sul l'impostazione di configurazione "mode" .

Utilizzo di Firebase con Rollup

Non è necessaria alcuna configurazione specifica per le app Firebase e il rollup. Questa sezione tratta una configurazione cumulativa generale.

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

Creare un file alla radice del proprio progetto denominato locali rollup.config.js e aggiungere il seguente codice.

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 passo successivo è quello di aggiungere uno script NPM per eseguire la build cumulativo. Aprire il package.json di file e aggiungere il seguente coppia di valori chiave per la "scripts" oggetto.

  "scripts": {
    "build": "rollup -c rollup.config.js"
  },

Per eseguire il rollup e generare la cartella di build, eseguire il comando seguente.

npm run build

Infine, controllare la dist cartella di compilazione. Dovrebbe contenere un file denominato bundle.js che contiene l'applicazione in bundle e il codice di dipendenza.

Per ulteriori informazioni su come ottimizzare il vostro accumulo cumulativo per la produzione, vedere la loro documentazione ufficiale sui plugin per la produzione di costruisce .

Utilizzo di Firebase con esbuild

Non è necessaria alcuna configurazione specifica per le app Firebase ed esbuild. Questa sezione tratta una configurazione generale di esbuild.

Il primo passo è installare esbuild come dipendenza di sviluppo.

npm i esbuild -D

Creare un file alla radice del proprio progetto denominato locali esbuild.config.js e aggiungere il seguente codice.

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 passo successivo è quello di aggiungere uno script NPM per esbuild corsa. Aprire il package.json di file e aggiungere il seguente coppia di valori chiave per la "scripts" oggetto.

  "scripts": {
    "build": "node ./esbuild.config.js"
  },

Infine, controllare la dist cartella di compilazione. Dovrebbe contenere un file denominato bundle.js che contiene l'applicazione in bundle e il codice di dipendenza.

Per ulteriori informazioni su come ottimizzare esbuild per la produzione, vedere la loro documentazione ufficiale sulla minimizzazione e altre ottimizzazioni .