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

Usar paquetes de módulos con Firebase

Los paquetes de módulos JavaScript pueden hacer muchas cosas, pero una de sus características más útiles es la capacidad de agregar y usar bibliotecas externas en su base de código. Los paquetes de módulos leen las rutas de importación en su código y combinan (empaquetan) el código específico de su aplicación con su código de biblioteca importado.

A partir de la versión 9 y posteriores, el SDK de Firebase JavaScript está optimizado para funcionar con las funciones de optimización de los paquetes de módulos para reducir la cantidad de código de Firebase incluido en su compilación final.

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.
 */

Este proceso de eliminar el código no utilizado de una biblioteca se conoce como agitación de árboles. Sería muy lento y propenso a errores eliminar manualmente este código a mano, pero los paquetes de módulos pueden automatizar esta eliminación.

Hay muchos paquetes de módulos de alta calidad en el ecosistema de JavaScript. Esta guía se centra en el recubrimiento con Firebase con webpack , el paquete acumulativo , y esbuild .

Empezar

Esta guía requiere que tenga npm instalado en su entorno de desarrollo. npm se usa para instalar y administrar dependencias (bibliotecas). Para instalar la NGP, instalar Node.js , que incluye NPM automáticamente.

La mayoría de los desarrolladores están configurados correctamente una vez que han instalado Node.js. Sin embargo, existen problemas comunes con los que se encuentran muchos desarrolladores al configurar su entorno. Si surge algún error, asegúrese de que su entorno tiene la CLI NPM y que tiene los permisos adecuados establecidos por lo que no tiene que instalar paquetes como administrador con el comando sudo .

package.json e instalando Firebase

Una vez que haya instalado la NGP tendrá que crear un package.json archivo en la raíz de su proyecto local. Genere este archivo con el siguiente comando npm:

npm init

Esto lo llevará a través de un asistente para proporcionar la información necesaria. Una vez creado el archivo, tendrá un aspecto similar al siguiente:

{
  "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": {

  }
}

Este archivo es responsable de muchas cosas diferentes. Este es un archivo importante con el que debe familiarizarse si desea obtener más información sobre la agrupación de módulos y la creación de código JavaScript en general. La pieza importante para esta guía es la "dependencies" objeto. Este objeto contendrá un par clave-valor de la biblioteca que ha instalado y la versión que está usando.

Adición de dependencias se realiza a través de la npm install o npm i comando.

npm i firebase

Cuando se ejecuta npm i firebase , el proceso de instalación actualizará package.json a la lista de Firebase como una dependencia:

  "dependencies": {
    "firebase": "^9.0.0"
  },

La clave es el nombre de la biblioteca y el valor es la versión a utilizar. El valor de la versión es flexible y puede aceptar un rango de valores. Esto se conoce como control de versiones semántico o semver. Para obtener más información sobre semver, consulte la guía del NPM acerca de las versiones semántica .

Carpetas de origen vs compilación

El código que escribe es leído y procesado por un paquete de módulos y luego se genera como un nuevo archivo o conjunto de archivos. Es importante separar estos dos tipos de archivos. El código que leen y procesan los paquetes de módulos se conoce como código "fuente". Los archivos que generan se conocen como código construido o "dist" (distribución).

Una configuración común en las bases de código al código fuente es almacenar en una carpeta llamada src y el código de construcción en una carpeta con el nombre dist .

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


- dist
 |_ bundle.js

En la estructura de archivo de ejemplo anterior, considere que index.js importaciones ambos animations.js y datalist.js . Cuando un bundler módulo procesa el código fuente se producirá el bundle.js archivo en el dist carpeta. Los bundle.js es una combinación de los archivos de la src carpeta y cualquier biblioteca de la importación así.

Si está utilizando sistemas de control de fuentes como Git, es común pasar por alto el dist carpeta al almacenar este código en el repositorio principal.

Puntos de entrada

Todos los paquetes de módulos tienen un concepto de punto de entrada. Puede pensar en su aplicación como un árbol de archivos. Un archivo importa código de otro y así sucesivamente. Esto significa que un archivo será la raíz del árbol. Este archivo se conoce como punto de entrada.

Repasemos el ejemplo de estructura de archivos anterior.

- 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);
});

El src/index.js archivo se considera el punto de entrada, ya que comienza la importación de todo el código necesario para la aplicación. Los empaquetadores de módulos utilizan este archivo de punto de entrada para comenzar el proceso de empaquetamiento.

Usando Firebase con webpack

No se necesita una configuración específica para las aplicaciones y el paquete web de Firebase. Esta sección cubre una configuración general webpack .

El primer paso es instalar el paquete web desde npm como una dependencia de desarrollo.

npm i webpack webpack-cli -D

Crear un archivo en la raíz de sus locales del proyecto llamado webpack.config.js y agregue el código siguiente.

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',
};

Luego, asegúrese de tener Firebase instalado como dependencia.

npm i firebase

Luego, inicialice Firebase en su base de código. El siguiente código importa e inicializa Firebase en un archivo de punto de entrada y usa Firestore Lite para cargar un documento de "ciudad".

// 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(),
  };
}

El siguiente paso es añadir un guión NPM para ejecutar la construcción webpack. Abra la package.json archivo y añadir el siguiente par de valores clave de la "scripts" objeto.

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

Para ejecutar el paquete web y generar la carpeta de compilación, ejecute el siguiente comando.

npm run build

Por último, comprobar la dist carpeta de compilación. Debe contener un archivo llamado bundle.js que contiene su aplicación incluida y el código de la dependencia.

Para obtener más información sobre cómo optimizar su construcción webpack para la producción, consulte su documentación oficial sobre el ajuste de configuración de "mode" .

Usar Firebase con Rollup

No se necesita una configuración específica para las aplicaciones y el paquete acumulativo de Firebase. Esta sección cubre una configuración general de Rollup.

El primer paso es instalar Rollup y un complemento que se utiliza para asignar las importaciones a las dependencias instaladas con npm.

npm i rollup @rollup/plugin-node-resolve -D

Crear un archivo en la raíz de sus locales del proyecto llamado rollup.config.js y agregue el código siguiente.

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()]
};

Luego, inicialice Firebase en su base de código. El siguiente código importa e inicializa Firebase en un archivo de punto de entrada y usa Firestore Lite para cargar un documento de "ciudad".

// 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(),
  };
}

El siguiente paso es añadir un guión NPM para ejecutar la construcción de resumen. Abra la package.json archivo y añadir el siguiente par de valores clave de la "scripts" objeto.

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

Para ejecutar el resumen y generar la carpeta de compilación, ejecute el siguiente comando.

npm run build

Por último, comprobar la dist carpeta de compilación. Debe contener un archivo llamado bundle.js que contiene su aplicación incluida y el código de la dependencia.

Para obtener más información sobre cómo optimizar su construcción acumulativo de la producción, consulte su documentación oficial de plugins para construye la producción .

Usando Firebase con esbuild

No se necesita una configuración específica para las aplicaciones de Firebase y esbuild. Esta sección cubre una configuración general de esbuild.

El primer paso es instalar esbuild como una dependencia de desarrollo.

npm i esbuild -D

Crear un archivo en la raíz de sus locales del proyecto llamado esbuild.config.js y agregue el código siguiente.

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))

Luego, inicialice Firebase en su base de código. El siguiente código importa e inicializa Firebase en un archivo de punto de entrada y usa Firestore Lite para cargar un documento de "ciudad".

// 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(),
  };
}

El siguiente paso es añadir un guión NPM a plazo esbuild. Abra la package.json archivo y añadir el siguiente par de valores clave de la "scripts" objeto.

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

Por último, comprobar la dist carpeta de compilación. Debe contener un archivo llamado bundle.js que contiene su aplicación incluida y el código de la dependencia.

Para obtener más información sobre la optimización de la producción esbuild, consulte su documentación oficial de minimización y otras optimizaciones .