Korzystanie z pakietów modułów z Firebase

Bundle modułów JavaScript mogą robić wiele rzeczy, ale jedną z ich najbardziej przydatnych funkcji jest możliwość dodawania i używania zewnętrznych bibliotek w bazie kodu. Moduły pakujące moduły odczytują ścieżki importu w twoim kodzie i łączą (pakują) twój kod aplikacji z zaimportowanym kodem biblioteki.

Od wersji 9 i nowszych modułowy interfejs API Firebase JavaScript jest zoptymalizowany pod kątem współpracy z funkcjami optymalizacyjnymi narzędzi do łączenia modułów w celu zmniejszenia ilości kodu Firebase zawartego w ostatecznej kompilacji.

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

Ten proces usuwania nieużywanego kodu z biblioteki jest znany jako wytrząsanie drzewa. Ręczne usunięcie tego kodu byłoby niezwykle czasochłonne i podatne na błędy, ale pakiety modułów mogą zautomatyzować to usuwanie.

W ekosystemie JavaScript istnieje wiele wysokiej jakości pakietów modułów. Ten przewodnik koncentruje się na omówieniu korzystania z Firebase z webpack , Rollup i esbuild .

Zaczynaj

Ten przewodnik wymaga zainstalowania npm w środowisku programistycznym. npm służy do instalowania i zarządzania zależnościami (bibliotekami). Aby zainstalować npm, zainstaluj Node.js , który automatycznie zawiera npm.

Większość programistów jest prawidłowo skonfigurowana po zainstalowaniu Node.js. Istnieją jednak typowe problemy, na które napotyka wielu programistów podczas konfigurowania swojego środowiska. Jeśli napotkasz jakieś błędy, upewnij się, że Twoje środowisko ma npm CLI i że masz ustawione odpowiednie uprawnienia, dzięki czemu nie musisz instalować pakietów jako administrator za pomocą polecenia sudo .

package.json i instalowanie Firebase

Po zainstalowaniu npm musisz utworzyć plik package.json w katalogu głównym lokalnego projektu. Wygeneruj ten plik za pomocą następującego polecenia npm:

npm init

Spowoduje to przejście przez kreatora w celu dostarczenia potrzebnych informacji. Po utworzeniu plik będzie wyglądał podobnie do następującego:

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

  }
}

Ten plik odpowiada za wiele różnych rzeczy. Jest to ważny plik, z którym należy się zapoznać, jeśli chcesz dowiedzieć się więcej o łączeniu modułów i ogólnie o budowaniu kodu JavaScript. Ważnym elementem tego przewodnika jest obiekt "dependencies" . Ten obiekt będzie zawierał parę klucz-wartość zainstalowanej biblioteki i używanej przez nią wersji.

Dodawanie zależności odbywa się za pomocą polecenia npm install lub npm i .

npm i firebase

Po uruchomieniu npm i firebase proces instalacji zaktualizuje package.json , aby wyświetlić Firebase jako zależność:

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

Kluczem jest nazwa biblioteki, a wartością jest wersja do użycia. Wartość wersji jest elastyczna i może akceptować zakres wartości. Jest to znane jako wersjonowanie semantyczne lub semver. Aby dowiedzieć się więcej o semver, zapoznaj się z przewodnikiem npm dotyczącym wersjonowania semantycznego .

Foldery źródłowe a kompilacja

Napisany przez Ciebie kod jest odczytywany i przetwarzany przez pakiet modułów, a następnie wyprowadzany jako nowy plik lub zestaw plików. Ważne jest, aby oddzielić te dwa typy plików. Kod odczytywany i przetwarzany przez pakiety modułów jest nazywany kodem „źródłowym”. Pliki, które wysyłają, są znane jako kod wbudowany lub „dist” (dystrybucja).

Typową konfiguracją baz kodu jest przechowywanie kodu źródłowego w folderze o nazwie src , a wbudowanego kodu w folderze o nazwie dist .

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


- dist
 |_ bundle.js

W powyższej przykładowej strukturze pliku weź pod uwagę, że index.js importuje zarówno animations.js , jak i datalist.js . Gdy program pakujący moduły przetwarza kod źródłowy, tworzy plik bundle.js w folderze dist . Plik bundle.js jest kombinacją plików w folderze src i bibliotek, które są importowane.

Jeśli używasz systemów kontroli źródła, takich jak Git, często ignorujesz folder dist podczas przechowywania tego kodu w głównym repozytorium.

Punkty wejścia

Wszystkie pakiety modułów mają koncepcję punktu wejścia. Możesz myśleć o swojej aplikacji jako o drzewie plików. Jeden plik importuje kod z innego i tak dalej i tak dalej. Oznacza to, że jeden plik będzie korzeniem drzewa. Ten plik jest znany jako punkt wejścia.

Wróćmy do poprzedniego przykładu struktury plików.

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

Plik src/index.js jest uważany za punkt wejścia, ponieważ rozpoczyna import całego potrzebnego kodu dla aplikacji. Ten plik punktu wejścia jest używany przez pakiety modułów do rozpoczęcia procesu łączenia.

Używanie Firebase z pakietem internetowym

Nie jest wymagana żadna konkretna konfiguracja dla aplikacji Firebase i webpacka. W tej sekcji omówiono ogólną konfigurację pakietu internetowego .

Pierwszym krokiem jest zainstalowanie pakietu internetowego z npm jako zależności programistycznej.

npm i webpack webpack-cli -D

Utwórz plik w katalogu głównym projektu lokalnego o nazwie webpack.config.js i dodaj następujący kod.

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

Następnie upewnij się, że masz zainstalowany Firebase jako zależność.

npm i firebase

Następnie zainicjuj Firebase w swojej bazie kodu. Poniższy kod importuje i inicjuje Firebase w pliku punktu wejścia i używa Firestore Lite do załadowania dokumentu „miasta”.

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

Następnym krokiem jest dodanie skryptu npm, aby uruchomić kompilację webpacka. Otwórz plik package.json i dodaj następującą parę klucz-wartość do obiektu "scripts" .

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

Aby uruchomić webpack i wygenerować folder kompilacji, uruchom następujące polecenie.

npm run build

Na koniec sprawdź folder kompilacji dist . Powinien zawierać plik o nazwie bundle.js zawierający dołączoną aplikację i kod zależności.

Aby uzyskać więcej informacji na temat optymalizowania kompilacji pakietu internetowego pod kątem produkcji, zapoznaj się z ich oficjalną dokumentacją dotyczącą ustawienia konfiguracji „tryb” .

Używanie Firebase z Rollupem

W przypadku aplikacji Firebase i pakietu zbiorczego nie jest wymagana żadna konkretna konfiguracja. W tej sekcji omówiono ogólną konfigurację pakietu zbiorczego.

Pierwszym krokiem jest zainstalowanie Rollupa i wtyczki służącej do mapowania importów do zależności zainstalowanych z npm.

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

Utwórz plik w katalogu głównym projektu lokalnego o nazwie rollup.config.js i dodaj następujący kod.

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

Następnie zainicjuj Firebase w swojej bazie kodu. Poniższy kod importuje i inicjuje Firebase w pliku punktu wejścia i używa Firestore Lite do załadowania dokumentu „miasta”.

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

Następnym krokiem jest dodanie skryptu npm, aby uruchomić kompilację kompilacji. Otwórz plik package.json i dodaj następującą parę klucz-wartość do obiektu "scripts" .

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

Aby uruchomić pakiet zbiorczy i wygenerować folder kompilacji, uruchom następujące polecenie.

npm run build

Na koniec sprawdź folder kompilacji dist . Powinien zawierać plik o nazwie bundle.js zawierający dołączoną aplikację i kod zależności.

Aby uzyskać więcej informacji na temat optymalizowania kompilacji pakietu zbiorczego pod kątem produkcji, zapoznaj się z ich oficjalną dokumentacją dotyczącą wtyczek do kompilacji produkcyjnych .

Używanie Firebase z esbuild

W przypadku aplikacji Firebase i esbuild nie jest wymagana żadna specyficzna konfiguracja. Ta sekcja obejmuje ogólną konfigurację esbuild.

Pierwszym krokiem jest zainstalowanie esbuild jako zależności programistycznej.

npm i esbuild -D

Utwórz plik w katalogu głównym projektu lokalnego o nazwie esbuild.config.js i dodaj następujący kod.

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

Następnie zainicjuj Firebase w swojej bazie kodu. Poniższy kod importuje i inicjuje Firebase w pliku punktu wejścia i używa Firestore Lite do załadowania dokumentu „miasta”.

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

Następnym krokiem jest dodanie skryptu npm do uruchomienia esbuild. Otwórz plik package.json i dodaj następującą parę klucz-wartość do obiektu "scripts" .

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

Na koniec sprawdź folder kompilacji dist . Powinien zawierać plik o nazwie bundle.js zawierający dołączoną aplikację i kod zależności.

Aby uzyskać więcej informacji na temat optymalizacji esbuild do produkcji, zobacz ich oficjalną dokumentację dotyczącą minifikacji i innych optymalizacji .