Pakiety 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. Programy pakujące moduły odczytują ścieżki importu w kodzie i łączą (wiązują) kod specyficzny dla aplikacji z zaimportowanym kodem biblioteki.
Od wersji 9 i nowszych modułowy interfejs API Firebase JavaScript jest zoptymalizowany do współpracy z funkcjami optymalizacyjnymi pakietów modułów w celu zmniejszenia ilości kodu Firebase zawartego w ostatecznej wersji.
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 nazywany jest potrząsaniem drzewem. Ręczne usunięcie tego kodu byłoby niezwykle czasochłonne i podatne na błędy, ale dostawcy 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 pakietem internetowym , pakietem zbiorczym i esbuildem .
Zaczynaj
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 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 środowiska. Jeśli napotkasz jakiekolwiek błędy, upewnij się, że twoje środowisko ma interfejs CLI npm i że masz skonfigurowane odpowiednie uprawnienia, abyś nie musiał instalować pakietów jako administrator za pomocą polecenia sudo .
package.json i instalując Firebase
Po zainstalowaniu npm będziesz musiał 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 poniższego:
{
"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 jest odpowiedzialny za wiele różnych rzeczy. Jest to ważny plik, z którym warto się zapoznać, jeśli chcesz dowiedzieć się więcej o pakowaniu modułów i ogólnie o budowaniu kodu JavaScript. Ważnym elementem tego przewodnika jest obiekt "dependencies" . Obiekt ten będzie przechowywać 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ć listę Firebase jako zależność:
"dependencies": {
"firebase": "^9.0.0"
},
Kluczem jest nazwa biblioteki, a wartością jest wersja, której należy użyć. Wartość wersji jest elastyczna i może przyjmować zakres wartości. Nazywa się to wersjonowaniem semantycznym lub semver. Aby dowiedzieć się więcej o semver, zobacz przewodnik npm na temat wersjonowania semantycznego .
Foldery źródłowe i kompilacje
Napisany kod jest odczytywany i przetwarzany przez program pakujący moduły, a następnie wysyłany jako nowy plik lub zestaw plików. Ważne jest, aby oddzielić te dwa typy plików. Kod, który programy pakujące moduły czytają i przetwarzają, nazywany jest kodem „źródłowym”. Pliki, które generują, nazywane są kodem wbudowanym lub kodem „dist” (dystrybucyjnym).
Typową konfiguracją w bazach kodu jest przechowywanie kodu źródłowego w folderze o nazwie src , a skompilowany kod w folderze o nazwie dist .
- src
|_ index.js
|_ animations.js
|_ datalist.js
- dist
|_ bundle.js
W powyższej przykładowej strukturze pliku należy wziąć pod uwagę, że index.js importuje zarówno animations.js , jak i datalist.js . Kiedy program pakujący moduły przetwarza kod źródłowy, utworzy plik bundle.js w folderze dist . bundle.js to kombinacja plików w folderze src i wszelkich importowanych bibliotek.
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 programy pakujące moduły mają koncepcję punktu wejścia. Możesz myśleć o swojej aplikacji jak 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. Plik ten nazywany jest punktem wejścia.
Powróć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 programy pakujące moduły do rozpoczęcia procesu łączenia.
Korzystanie z Firebase z pakietem internetowym
Nie jest wymagana żadna konkretna konfiguracja aplikacji i pakietu internetowego Firebase. W tej sekcji opisano ogólną konfigurację pakietu internetowego .
Pierwszym krokiem jest instalacja 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 Firebase jest zainstalowany jako zależność.
npm i firebase
Następnie zainicjuj Firebase w 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 w celu uruchomienia kompilacji pakietu internetowego. Otwórz plik package.json i dodaj następującą 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 zawierać plik o nazwie bundle.js , który zawiera dołączoną aplikację i kod zależności.
Aby uzyskać więcej informacji na temat optymalizacji kompilacji pakietu internetowego pod kątem produkcji, zobacz oficjalną dokumentację dotyczącą ustawienia konfiguracji „trybu” .
Korzystanie z Firebase z pakietem zbiorczym
Nie jest wymagana żadna konkretna konfiguracja aplikacji Firebase ani pakietu zbiorczego. W tej sekcji opisano ogólną konfigurację pakietu zbiorczego.
Pierwszym krokiem jest instalacja Rollupa i wtyczki służącej do mapowania importów na zależności instalowane 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 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 w celu uruchomienia kompilacji zbiorczej. 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 , który zawiera dołączoną aplikację i kod zależności.
Aby uzyskać więcej informacji na temat optymalizacji kompilacji zbiorczej pod kątem produkcji, zobacz ich oficjalną dokumentację dotyczącą wtyczek do kompilacji produkcyjnych .
Używanie Firebase z esbuild
Dla aplikacji Firebase i esbuild nie jest wymagana żadna konkretna konfiguracja. W tej sekcji opisano ogólną konfigurację esbuild.
Pierwszym krokiem jest instalacja 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 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 , który zawiera dołączoną aplikację i kod zależności.
Aby uzyskać więcej informacji na temat optymalizacji esbuild pod kątem produkcji, zobacz ich oficjalną dokumentację dotyczącą minifikacji i innych optymalizacji .