Pakiety modułów JavaScript mają wiele możliwości, ale jedną z ich najbardziej przydatnych jest możliwość dodawania do bazy kodu zewnętrznych bibliotek i używania ich. Moduły tworzące pakiety odczytują ścieżki importu w kodzie i łączą (w pakiet) Twój kod aplikacji z zaimportowanym kodem biblioteki.
Począwszy od wersji 9, modułowy interfejs API Firebase JavaScript jest zoptymalizowany pod kątem współpracy z funkcjami optymalizacji pakietów modułów, by zmniejszyć ilość kodu Firebase w końcowej 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 usuwanie tego kodu byłoby niezwykle czasochłonne i podatne na błędy, ale twórcy pakietów modułów mogą zautomatyzować to usuwanie.
W ekosystemie JavaScriptu jest wiele wysokiej jakości modułów do łączenia modułów. Ten przewodnik dotyczy korzystania z Firebase za pomocą pakietu webpack, Rollup i esbuild.
Pierwsze kroki
Ten przewodnik wymaga zainstalowania npm w środowisku programistycznym. Służy do instalowania zależności (bibliotek) i zarządzania nimi. Aby zainstalować npm, zainstaluj środowisko Node.js, które automatycznie zawiera npm.
Większość programistów jest poprawnie skonfigurowana po zainstalowaniu środowiska Node.js. Istnieją jednak typowe problemy napotykane przez wielu deweloperów podczas konfigurowania środowiska. Jeśli wystąpią błędy, sprawdź, czy w Twoim środowisku jest interfejs wiersza poleceń npm i czy masz skonfigurowane odpowiednie uprawnienia. Dzięki temu 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 projektu lokalnego. Wygeneruj ten plik za pomocą tego polecenia npm:
npm init
Spowoduje to podanie wymaganych informacji przez kreatora. Po utworzeniu plik 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, jeśli chcesz dowiedzieć się więcej o grupowaniu modułów i tworzeniu kodu JavaScript. Ważnym elementem tego przewodnika jest obiekt "dependencies". Ten obiekt będzie zawierać parę klucz-wartość z zainstalowanej biblioteki oraz jej wersji.
Zależności dodajesz za pomocą polecenia npm install lub npm i.
npm i firebase
Gdy uruchomisz npm i firebase, proces instalacji zostanie zaktualizowany w package.json w celu wyświetlenia Firebase jako zależności:
"dependencies": {
"firebase": "^9.0.0"
},
Kluczem jest nazwa biblioteki, a wartością jest jej wersja. Wartość wersji jest elastyczna i może przyjmować różne wartości. Nazywamy to obsługą wersji semantycznych lub semverem. Więcej informacji o semver znajdziesz w przewodniku npm na temat semantycznej obsługi wersji.
Foldery źródłowe a foldery kompilacji
Napisany przez Ciebie kod jest odczytywany i przetwarzany przez pakiet modułów modułów, a następnie przesyłany jako nowy plik lub zbiór plików. Ważne jest rozdzielenie tych 2 typów plików. Kod, który odczytują i przetwarzają pakiety modułów, jest nazywany kodem „źródłowym”. Tworzone przez nie pliki są nazywane kodem kompilującym lub „dist” (dystrybucyjnym).
Typową konfiguracją w bazach kodu jest zapisanie kodu źródłowego w folderze o nazwie src, a kodu wbudowanego – 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 zarówno animations.js, jak i datalist.js. Gdy moduł pakowania modułów przetworzy kod źródłowy, utworzy plik bundle.js w folderze dist. Element bundle.js składa się z plików z folderu src oraz wszystkich importowanych bibliotek.
Jeśli korzystasz z systemów kontroli źródła, takich jak Git, często ignorujesz folder dist, gdy przechowujesz ten kod w repozytorium głównym.
Punkty wejścia
Wszyscy twórcy pakietów modułów mają koncepcję punktu wejścia. Aplikację można traktować jak drzewo plików. Jeden plik importuje kod z drugiego itd. Oznacza to, że jeden plik będzie korzeniem drzewa. Nazywamy go 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ż rozpoczyna importowanie całego kodu wymaganego przez aplikację. Ten plik punktu wejścia jest używany przez podmioty tworzące pakiety modułów do rozpoczęcia procesu grupowania.
Używanie Firebase z pakietem webpack
Aplikacje i pakiet internetowy Firebase nie wymagają specjalnej konfiguracji. W tej sekcji omówiono 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 poniższy 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 oraz używa Firestore Lite do wczytania dokumentu „miasto”.
// 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, który spowoduje uruchomienie kompilacji pakietu internetowego. Otwórz plik package.json i dodaj poniższą parę klucz-wartość do obiektu "scripts".
"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 optymalizowaniu kompilacji pakietu internetowego pod kątem środowiska produkcyjnego znajdziesz w oficjalnej dokumentacji dotyczącej ustawienia konfiguracji „tryb”.
Używanie Firebase z usługą o pełnym zakresie
Aplikacje Firebase i usługi Rollup nie wymagają szczególnej konfiguracji. W tej sekcji 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 poniższy 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 oraz używa Firestore Lite do wczytania dokumentu „miasto”.
// 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, który spowoduje uruchomienie kompilacji o pełnym zakresie. Otwórz plik package.json i dodaj poniższą parę klucz-wartość do obiektu "scripts".
"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 optymalizowaniu kompilacji o pełnym zakresie na potrzeby środowiska produkcyjnego znajdziesz w oficjalnej dokumentacji wtyczek do kompilacji produkcyjnych.
Używanie Firebase z esbuild
Aplikacje Firebase i esbuild nie wymagają żadnej konkretnej konfiguracji. W tej sekcji omawiamy ogólną konfigurację funkcji 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 poniższy 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 oraz używa Firestore Lite do wczytania dokumentu „miasto”.
// 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, który spowoduje uruchomienie esbuild. Otwórz plik package.json i dodaj poniższą 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 esbuild pod kątem środowiska produkcyjnego znajdziesz w oficjalnej dokumentacji na temat minifikacji i innych optymalizacji.