Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Usando empacotadores de módulo com Firebase

Os empacotadores de módulo JavaScript podem fazer muitas coisas, mas um de seus recursos mais úteis é a capacidade de adicionar e usar bibliotecas externas em sua base de código. Os empacotadores de módulo lêem caminhos de importação em seu código e combinam (agrupam) seu código específico de aplicativo com seu código de biblioteca importado.

A partir da versão 9 e superior, o SDK do Firebase para JavaScript é otimizado para funcionar com os recursos de otimização dos empacotadores de módulo para reduzir a quantidade de código do Firebase incluído em sua compilação 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.
 */

Esse processo de eliminação de código não utilizado de uma biblioteca é conhecido como trepidação de árvore. Seria extremamente demorado e sujeito a erros remover manualmente esse código, mas os empacotadores de módulo podem automatizar essa remoção.

Existem muitos empacotadores de módulo de alta qualidade no ecossistema JavaScript. Este guia está focada em cobre usando Firebase com Webpack , Rollup , e esbuild .

iniciar

Este guia requer que você tenha o npm instalado em seu ambiente de desenvolvimento. O npm é usado para instalar e gerenciar dependências (bibliotecas). Para instalar npm, instalar Node.js , que inclui npm automaticamente.

A maioria dos desenvolvedores é configurada corretamente depois de instalar o Node.js. No entanto, existem problemas comuns que muitos desenvolvedores enfrentam ao configurar seu ambiente. Se você tiver algum erro, verifique se o ambiente tem o CLI npm e que você tem as permissões adequadas configuradas de modo que você não precisa instalar pacotes como um administrador com o comando sudo .

package.json e instalação do Firebase

Depois de ter npm instalado, você precisará criar um package.json arquivo na raiz do seu projeto local. Gere esse arquivo com o seguinte comando npm:

npm init

Isso o levará por um assistente para fornecer as informações necessárias. Depois que o arquivo for criado, ele terá a seguinte aparência:

{
  "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 arquivo é responsável por muitas coisas diferentes. Este é um arquivo importante com o qual você deve se familiarizar se quiser aprender mais sobre o empacotamento de módulo e a construção de código JavaScript em geral. A peça importante para este guia é o "dependencies" objeto. Este objeto conterá um par de valores-chave da biblioteca que você instalou e a versão que está usando.

Incluindo Dependências é feito através do npm install ou npm i comando.

npm i firebase

Quando você executa npm i firebase , o processo de instalação irá atualizar package.json a lista Firebase como uma dependência:

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

A chave é o nome da biblioteca e o valor é a versão a ser usada. O valor da versão é flexível e pode aceitar uma variedade de valores. Isso é conhecido como versionamento semântico ou semver. Para saber mais sobre semver, consulte o guia do NPM sobre versionamento semântico .

Fontes vs pastas de construção

O código que você escreve é ​​lido e processado por um empacotador de módulo e, em seguida, gerado como um novo arquivo ou conjunto de arquivos. É importante separar esses dois tipos de arquivos. O código que os empacotadores de módulo leem e processam é conhecido como código "fonte". Os arquivos que eles geram são conhecidos como código construído ou "dist" (distribuição).

Uma configuração comum em bases de código é o código-fonte loja em uma pasta chamada src eo código construído em uma pasta chamada dist .

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


- dist
 |_ bundle.js

Na estrutura de arquivo de exemplo acima, considere que index.js importações ambos animations.js e datalist.js . Quando um módulo bundler processa o código-fonte que irá produzir o bundle.js arquivo no dist pasta. Os bundle.js é uma combinação dos arquivos do src pasta e quaisquer bibliotecas a importação bem.

Se você estiver usando sistemas de controle de origem, como Git, é comum ignorar a dist pasta quando guardar este código no repositório principal.

Pontos de entrada

Todos os empacotadores de módulo têm um conceito de um ponto de entrada. Você pode pensar em seu aplicativo como uma árvore de arquivos. Um arquivo importa código de outro e assim por diante. Isso significa que um arquivo será a raiz da árvore. Este arquivo é conhecido como ponto de entrada.

Vamos revisitar o exemplo anterior de estrutura de arquivo.

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

O src/index.js arquivo é considerado o ponto de entrada porque começa as importações de todo o código necessário para a aplicação. Este arquivo de ponto de entrada é usado por empacotadores de módulo para iniciar o processo de empacotamento.

Usando o Firebase com webpack

Não há configuração específica necessária para aplicativos e webpack do Firebase. Esta seção cobre uma configuração geral Webpack .

A primeira etapa é instalar o webpack do npm como uma dependência de desenvolvimento.

npm i webpack webpack-cli -D

Crie um arquivo na raiz de seu projeto chamado locais webpack.config.js e adicione o código a seguir.

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

Em seguida, certifique-se de ter o Firebase instalado como uma dependência.

npm i firebase

Em seguida, inicialize o Firebase em sua base de código. O código a seguir importa e inicializa o Firebase em um arquivo de ponto de entrada e usa o Firestore Lite para carregar um documento de "cidade".

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

O próximo passo é adicionar um script npm para executar a construção Webpack. Abra o package.json arquivo e adicione o seguinte par de valores chave para o "scripts" objeto.

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

Para executar o webpack e gerar a pasta de construção, execute o seguinte comando.

npm run build

Finalmente, verifique a dist pasta de compilação. Ele deve conter um arquivo chamado bundle.js que contém o pacote de aplicativos e código de dependência.

Para mais informações sobre como otimizar sua construção Webpack para a produção, consulte sua documentação oficial sobre a definição de configuração "mode" .

Usando Firebase com Rollup

Não há configuração específica necessária para aplicativos Firebase e rollup. Esta seção cobre uma configuração geral de Rollup.

A primeira etapa é instalar o Rollup e um plug-in usado para mapear as importações para dependências instaladas com o npm.

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

Crie um arquivo na raiz de seu projeto chamado locais rollup.config.js e adicione o código a seguir.

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

Em seguida, inicialize o Firebase em sua base de código. O código a seguir importa e inicializa o Firebase em um arquivo de ponto de entrada e usa o Firestore Lite para carregar um documento de "cidade".

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

O próximo passo é adicionar um script npm para executar a construção cumulativo. Abra o package.json arquivo e adicione o seguinte par de valores chave para o "scripts" objeto.

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

Para executar o rollup e gerar a pasta de construção, execute o seguinte comando.

npm run build

Finalmente, verifique a dist pasta de compilação. Ele deve conter um arquivo chamado bundle.js que contém o pacote de aplicativos e código de dependência.

Para mais informações sobre como otimizar sua construção Rollup para a produção, ver a sua documentação oficial sobre plugins para compilações de produção .

Usando Firebase com esbuild

Não há configuração específica necessária para aplicativos Firebase e esbuild. Esta seção cobre uma configuração geral do esbuild.

A primeira etapa é instalar o esbuild como uma dependência de desenvolvimento.

npm i esbuild -D

Crie um arquivo na raiz de seu projeto chamado locais esbuild.config.js e adicione o código a seguir.

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

Em seguida, inicialize o Firebase em sua base de código. O código a seguir importa e inicializa o Firebase em um arquivo de ponto de entrada e usa o Firestore Lite para carregar um documento de "cidade".

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

O próximo passo é adicionar um script npm para esbuild prazo. Abra o package.json arquivo e adicione o seguinte par de valores chave para o "scripts" objeto.

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

Finalmente, verifique a dist pasta de compilação. Ele deve conter um arquivo chamado bundle.js que contém o pacote de aplicativos e código de dependência.

Para mais informações sobre como otimizar esbuild para a produção, ver a sua documentação oficial sobre minification e outras otimizações .