Korzystanie z pakietów pakietów modułów z Firebase

Pakiety modułów JavaScript pozwalają wykonywać wiele czynności, ale jedną z najbardziej przydatnych to możliwość dodawania do bazy kodu zewnętrznych bibliotek i korzystania z nich. Pakiety pakietów odczytują ścieżki importu w kodzie i łączą konkretnego kodu aplikacji za pomocą zaimportowanego kodu biblioteki.

Od wersji 9 lub nowszej modułowy interfejs API Firebase JavaScript jest zoptymalizowana do współpracy z funkcje optymalizacji pakietów modułów pozwalające zmniejszyć ilość kodu Firebase. zawarte w gotowej 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.
 */

Proces wyeliminowania nieużywanego kodu z biblioteki jest nazywany potrząsaniem drzew. Ręczne usunięcie tych danych byłoby bardzo czasochłonne i ryzykowne ręcznie, ale pakiety tworzące moduły mogą zautomatyzować ten proces.

W ekosystemie JavaScriptu jest wiele wysokiej jakości modułów do łączenia modułów. Ten omawiamy korzystanie z Firebase webpack, Podsumowanie, oraz esbuild.

Rozpocznij

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

Większość programistów jest poprawnie skonfigurowana po zainstalowaniu środowiska Node.js. Pamiętaj jednak: to bardzo częste problemy, które często napotykają dla środowiska. Jeśli wystąpią błędy, upewnij się, że Twoje środowisko ma interfejs wiersza poleceń npm oraz czy masz odpowiednie uprawnienia nie muszą instalować pakietów jako administrator za pomocą polecenia sudo.

package.json i instalowanie Firebase

Po zainstalowaniu npm musisz utworzyć plik package.json w elementu głównego projektu lokalnego. Wygeneruj ten plik za pomocą tego polecenia npm:

npm init

Spowoduje to podanie wymaganych informacji przez kreatora. Gdy funkcja będzie wyglądać mniej więcej tak:

{
  "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 zadań. Ten plik jest ważny dla sprawdź, czy chcesz dowiedzieć się więcej o grupowaniu modułów i tworzeniu kodu JavaScript. Ważną częścią tego przewodnika jest "dependencies" obiekt. Ten obiekt będzie zawierać parę klucz-wartość biblioteki i używanej wersji.

Zależności dodajesz za pomocą polecenia npm install lub npm i.

npm i firebase

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

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

Kluczem jest nazwa biblioteki, a wartością jest jej wersja. jest elastyczna i może przyjmować zakres wartości. Jest to tzw. semantyczna obsługa wersji lub semver. Aby dowiedzieć się więcej o semver, zobacz przewodnik npm dotyczący semantycznej obsługi wersji.

Foldery źródłowe a foldery kompilacji

Napisany przez Ciebie kod jest odczytywany i przetwarzany przez usługę tworzącą pakiety modułów, a następnie nowy plik lub zestaw plików. Ważne jest rozdzielenie tych 2 typów plików. Kod, który odczytują i przetwarzają pakiety modułów, nosi nazwę „źródło”. w kodzie. są określane jako pliki „zbudowane” (dystrybucyjny).

Typową konfiguracją w bazach kodu jest przechowywanie kodu źródłowego w folderze o nazwie src i kod kompilacji w folderze o nazwie dist.

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


- dist
 |_ bundle.js

W przykładowej strukturze plików powyżej pamiętaj, że index.js importuje obydwa typy plików animations.js i datalist.js. Gdy pakiet modułów przetwarza źródło spowoduje generowanie pliku bundle.js w folderze dist. bundle.js to połączenie plików w folderze src i wszystkich bibliotek importowanych .

Jeśli korzystasz z systemów kontroli źródła, takich jak Git, dist podczas przechowywania tego kodu w repozytorium głównym.

Punkty wejścia

Wszyscy twórcy pakietów modułów mają koncepcję punktu wejścia. Możesz określić, aplikacji jako drzewo plików. Jeden plik importuje kod z innego itd. i tak dalej. Oznacza to, że jeden plik będzie korzeniem drzewa. Ten plik jest nazywa się punktem 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ż zaczyna się cały kod potrzebny aplikacji. Ten plik punktu wejścia to używane przez podmioty tworzące pakiet modułów do rozpoczęcia procesu łączenia.

Używanie Firebase z pakietem webpack

Aplikacje i pakiet internetowy Firebase nie wymagają specjalnej konfiguracji. Ten omawiamy ogólną konfigurację pakietu internetowego.

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

npm i webpack webpack-cli -D

Utwórz w katalogu głównym projektu lokalnego plik o nazwie webpack.config.js i dodaj ten 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 zainstalowaną aplikację 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 wczytania „miasto” dokument.

// 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ę pakietu internetowego. Otwórz plik package.json. i dodaj do obiektu "scripts" poniższą parę klucz-wartość.

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

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

npm run build

Na koniec sprawdź folder kompilacji dist. Powinien on zawierać plik o nazwie bundle.js, który zawiera pakiet aplikacji i kod zależności.

Więcej informacji o optymalizacji kompilacji pakietu internetowego pod kątem środowiska produkcyjnego znajdziesz w oficjalna dokumentacja na temat „trybu” konfiguracji.

Używanie Firebase z usługą o pełnym zakresie

Aplikacje Firebase i usługi Rollup nie wymagają szczególnej konfiguracji. Ten omawiamy ogólną konfigurację podsumowania.

Pierwszym krokiem jest zainstalowanie usługi Rollup i wtyczki używanej do mapowania importów na zależności zainstalowanych przy użyciu npm.

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

Utwórz w katalogu głównym projektu lokalnego plik 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 wczytania „miasto” dokument.

// 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ę o pełnym zakresie. Otwórz plik package.json. i dodaj do obiektu "scripts" poniższą parę klucz-wartość.

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

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

npm run build

Na koniec sprawdź folder kompilacji dist. Powinien on zawierać plik o nazwie bundle.js, który zawiera pakiet aplikacji i kod zależności.

Więcej informacji o optymalizacji kompilacji o pełnym zakresie pod kątem środowiska produkcyjnego znajdziesz w oficjalnej dokumentacji wtyczek do kompilacji produkcyjnych.

Używanie Firebase z esbuild

Aplikacje Firebase i esbuild nie wymagają żadnej konkretnej konfiguracji. Ten zawiera informacje o ogólnej konfiguracji esbuild.

Pierwszym krokiem jest zainstalowanie narzędzia esbuild jako zależność deweloperska.

npm i esbuild -D

Utwórz w katalogu głównym projektu lokalnego plik o nazwie esbuild.config.js i dodaj ten 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 wczytania „miasto” dokument.

// 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ć esbuild. Otwórz plik package.json i dodaj tę parę klucz-wartość do obiektu "scripts".

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

Na koniec sprawdź folder kompilacji dist. Powinien on zawierać plik o nazwie bundle.js, który zawiera pakiet aplikacji i kod zależności.

Więcej informacji na temat optymalizacji tworzenia wersji produkcyjnej pod kątem środowiska produkcyjnego dokumentację na temat minifikacji i innych optymalizacji.