Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.

Uso de paquetes de módulos con Firebase

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Los paquetes de módulos de 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 rutas de importación en su código y combinan (agrupan) su código específico de la aplicación con su código de biblioteca importado.

A partir de la versión 9 y posteriores, el SDK de JavaScript de Firebase 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. Retirar manualmente este código llevaría mucho tiempo y sería propenso a errores, 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 enfoca en cubrir el uso de Firebase con webpack , Rollup y esbuild .

Empezar

Esta guía requiere que tenga instalado npm en su entorno de desarrollo. npm se usa para instalar y administrar dependencias (bibliotecas). Para instalar npm, instale 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 se encuentra con algún error, asegúrese de que su entorno tenga la CLI de npm y que tenga los permisos adecuados configurados para no tener que instalar paquetes como administrador con el comando sudo .

package.json e instalando Firebase

Una vez que haya instalado npm, deberá crear un archivo package.json 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 que se crea el archivo, se verá similar a lo 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 de esta guía es el objeto "dependencies" . Este objeto contendrá un par de valores clave de la biblioteca que ha instalado y la versión que está utilizando.

La adición de dependencias se realiza mediante el npm install o npm i .

npm i firebase

Cuando ejecuta npm i firebase , el proceso de instalación actualizará package.json para enumerar 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 versionado semántico o semver. Para obtener más información sobre semver, consulte la guía de npm sobre versiones semánticas .

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 es almacenar el código fuente en una carpeta llamada src y el código construido en una carpeta llamada dist .

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


- dist
 |_ bundle.js

En la estructura de archivo de ejemplo anterior, considere que index.js importa tanto animations.js como datalist.js . Cuando un paquete de módulos procesa el código fuente, producirá el archivo bundle.js en la carpeta dist . El bundle.js es una combinación de los archivos en la carpeta src y cualquier biblioteca que se importe también.

Si está utilizando sistemas de control de fuente como Git, es común ignorar la carpeta dist 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 el punto de entrada.

Repasemos el ejemplo anterior de estructura de archivos.

- 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 archivo src/index.js se considera el punto de entrada porque comienza las importaciones 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 empaquetado.

Usando Firebase con paquete web

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 del paquete web .

El primer paso es instalar webpack desde npm como dependencia de desarrollo.

npm i webpack webpack-cli -D

Cree un archivo en la raíz de su proyecto local llamado webpack.config.js y agregue el siguiente código.

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 una 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 agregar un script npm para ejecutar la compilación del paquete web. Abra el archivo package.json y agregue el siguiente par de valores clave al objeto "scripts" .

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

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

npm run build

Finalmente, verifique la carpeta de compilación dist . Debe contener un archivo llamado bundle.js que contenga la aplicación empaquetada y el código de dependencia.

Para obtener más información sobre cómo optimizar la compilación de su paquete web para la producción, consulte su documentación oficial sobre la opción de configuración "modo" .

Uso de Firebase con resumen

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

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

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

Cree un archivo en la raíz de su proyecto local llamado rollup.config.js y agregue el siguiente código.

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 agregar un script npm para ejecutar la compilación acumulada. Abra el archivo package.json y agregue el siguiente par de valores clave al objeto "scripts" .

  "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

Finalmente, verifique la carpeta de compilación dist . Debe contener un archivo llamado bundle.js que contenga la aplicación empaquetada y el código de dependencia.

Para obtener más información sobre cómo optimizar su compilación de resumen para producción, consulte su documentación oficial sobre complementos para compilaciones de 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 dependencia de desarrollo.

npm i esbuild -D

Cree un archivo en la raíz de su proyecto local llamado esbuild.config.js y agregue el siguiente código.

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 agregar un script npm para ejecutar esbuild. Abra el archivo package.json y agregue el siguiente par de valores clave al objeto "scripts" .

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

Finalmente, verifique la carpeta de compilación dist . Debe contener un archivo llamado bundle.js que contenga la aplicación empaquetada y el código de dependencia.

Para obtener más información sobre cómo optimizar esbuild para producción, consulte su documentación oficial sobre minificación y otras optimizaciones .