Pakiety modułów JavaScript mogą służyć do wielu celów, ale jedną z najprzydatniejszych funkcji jest możliwość dodawania zewnętrznych bibliotek do bazy kodu i korzystania z nich. Pakowarki modułów odczytują ścieżki importu w Twoim kodzie i łączą (pakują) kod aplikacji z zaimportowanym kodem biblioteki.
Od wersji 9 i wyższych interfejs API modułowego Firebase w JavaScript jest zoptymalizowany pod kątem współpracy z funkcjami optymalizacji pakietów modułowych, aby zmniejszyć ilość kodu Firebase zawartego w pobranym pakiecie.
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 nazywa się usuwaniem zbędących elementów. Ręczne usuwanie tego kodu jest bardzo czasochłonne i obarczone ryzykiem popełnienia błędu, ale można zautomatyzować to zadanie za pomocą pakietów modułów.
W ekosystemie JavaScript jest wiele wysokiej jakości pakietów modułów. Ten przewodnik skupia się na korzystaniu z Firebase w połączeniu z webpackem, Rollupem i esbuildem.
Rozpocznij
Aby skorzystać z tego przewodnika, musisz mieć zainstalowany npm w środowisku programistycznym. npm służy do instalowania zależności (bibliotek) i zarządzania nimi. Aby zainstalować npm, zainstaluj Node.js, który automatycznie zawiera npm.
Większość deweloperów ma prawidłowo skonfigurowany system po zainstalowaniu Node.js. Jednak wielu deweloperów napotyka typowe problemy podczas konfigurowania środowiska. Jeśli wystąpią błędy, upewnij się, że w Twoim środowisku jest zainstalowany wiersz poleceń npm CLI i że masz prawidłowo skonfigurowane uprawnienia, aby nie musieć 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ą tego polecenia npm:
npm init
Pojawi się kreator, który poprowadzi Cię przez proces podawania wymaganych informacji. Po utworzeniu plik będzie wyglądać 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 rzeczy. Jeśli chcesz dowiedzieć się więcej o pakowaniu modułów i tworzenia kodu JavaScript, zapoznaj się z tym ważnym plikiem. Ważnym elementem tego przewodnika jest obiekt "dependencies". Ten obiekt będzie zawierać parę klucz-wartość z zainstalowaną biblioteką i wersją, której używa.
Dodawanie zależności odbywa się za pomocą polecenia npm install lub npm i.
npm i firebase
Gdy uruchomisz npm i firebase, proces instalacji zaktualizuje package.json, aby uwzględnić Firebase jako zależność:
"dependencies": {
"firebase": "^9.0.0"
},
Kluczem jest nazwa biblioteki, a wartością jest wersja, której chcesz użyć. Wartość version jest elastyczna i może przyjmować różne wartości. Jest to tzw. wersjonowanie semantyczne lub semver. Więcej informacji o semver znajdziesz w przewodniku npm na temat wersji semantycznej.
Foldery źródłowe a foldery kompilacji
Napisany przez Ciebie kod jest odczytywany i przetwarzany przez moduł zbiorczy, a potem zapisywany jako nowy plik lub zestaw plików. Należy rozdzielać te 2 typy plików. Kod odczytywany i przetwarzany przez moduły zbiorcze to tzw. kod źródłowy. Pliki wyjściowe są nazywane skompilowanym lub „dist” (dystrybucyjnym) kodem.
W bazach kodu często kod źródłowy jest przechowywany w folderze o nazwie src, a skompilowany kod w folderze o nazwie dist.
- src
|_ index.js
|_ animations.js
|_ datalist.js
- dist
|_ bundle.js
W przykładowej strukturze pliku powyżej index.js importuje zarówno animations.js, jak i datalist.js. Gdy moduł pakietu przetworzy kod źródłowy, utworzy plik bundle.js w folderze dist. Plik bundle.js to kombinacja plików z folderu src oraz bibliotek, które zostały zaimportowane.
Jeśli używasz systemów kontroli źródła, takich jak Git, podczas przechowywania kodu w głównym repozytorium często ignorujesz folder dist.
Punkty wejścia
W przypadku pakietów modułów występuje pojęcie punktu wejścia. Aplikację możesz sobie wyobrazić jako drzewo plików. Jeden plik importuje kod z drugiego itd. Oznacza to, że jeden plik będzie korzeniami drzewa. Ten plik jest nazywany 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 punktem wejścia, ponieważ rozpoczyna importowanie całego kodu potrzebnego do działania aplikacji. Ten plik punktu wejścia jest używany przez osoby tworzące pakiety modułów do rozpoczęcia procesu tworzenia pakietów.
Korzystanie z Firebase z webpack
W przypadku aplikacji Firebase i webpacka nie trzeba konfigurować niczego specjalnego. W tej sekcji omówiono ogólną konfigurację Webpacka.
Pierwszym krokiem jest zainstalowanie webpacka z npm jako 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 do niego 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 sprawdź, czy Firebase jest zainstalowany jako zależność.
npm i firebase
Następnie zainicjuj Firebase w bazie kodu. Poniższy kod importuje i inicjializuje Firebase w pliku punktu wejścia, a następnie używa Firestore Lite do wczytania dokumentu „city”.
// 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ę webpack. Otwórz plik package.json i dodaj do obiektu "scripts" tę parę klucz-wartość:
"scripts": {
"build": "webpack --mode=development"
},
Aby uruchomić webpack i wygenerować folder kompilacji, uruchom to 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 webpacka na potrzeby wersji produkcyjnej znajdziesz w oficjalnej dokumentacji dotyczącej ustawienia konfiguracji „mode”.
Korzystanie z Firebase w połączeniu z zbiorczym raportem
W przypadku aplikacji Firebase i podsumowań nie trzeba konfigurować niczego w szczególny sposób. W tej sekcji omawiamy ogólną konfigurację podsumowania.
Najpierw zainstaluj Rollup i wtyczkę służącą do mapowania importów na zależności zainstalowane za pomocą 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 do niego ten 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 bazie kodu. Poniższy kod importuje i inicjializuje Firebase w pliku punktu wejścia, a następnie używa Firestore Lite do wczytania dokumentu „city”.
// 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(),
};
}
Kolejnym krokiem jest dodanie skryptu npm, aby uruchomić kompilację zbiorczą. Otwórz plik package.json i dodaj do obiektu "scripts" tę parę klucz-wartość:
"scripts": {
"build": "rollup -c rollup.config.js"
},
Aby uruchomić podsumowanie i wygenerować folder kompilacji, uruchom to 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 zbiorczej na potrzeby wersji produkcyjnych znajdziesz w oficjalnej dokumentacji wtyczek do wersji produkcyjnych.
Korzystanie z Firebase z esbuild
W przypadku aplikacji Firebase i esbuild nie trzeba konfigurować niczego specjalnego. W tej sekcji omawiamy ogólną konfigurację esbuild.
Pierwszym krokiem jest zainstalowanie esbuild jako zależności programistycznej.
npm i esbuild -D
Utwórz w katalogu głównym projektu lokalnego plik o nazwie esbuild.config.js i dodaj do niego 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 bazie kodu. Poniższy kod importuje i inicjializuje Firebase w pliku punktu wejścia, a następnie używa Firestore Lite do wczytania dokumentu „city”.
// 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(),
};
}
Kolejnym krokiem jest dodanie skryptu npm do uruchomienia esbuild. Otwórz plik package.json i dodaj do obiektu "scripts" tę parę klucz-wartość:
"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 o optymalizacji esbuild na potrzeby wersji produkcyjnej znajdziesz w oficjalnej dokumentacji na temat kompresji i innych optymalizacji.