Bundlery modułów JavaScript mogą robić wiele rzeczy, ale jedną z ich najbardziej użytecznych funkcji jest możliwość dodawania i używania bibliotek zewnętrznych w bazie kodu. Pakiety modułów odczytują ścieżki importu w kodzie i łączą (pakują) kod aplikacji z kodem zaimportowanej biblioteki.
Od wersji 9 i nowszych pakiet Firebase JavaScript SDK jest zoptymalizowany do pracy z funkcjami optymalizacji pakietów 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 potrząsanie drzewem. Ręczne usuwanie 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 pakietem internetowym , pakietem zbiorczym 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 natrafia wielu programistów podczas konfigurowania swojego środowiska. Jeśli napotkasz jakiekolwiek błędy, upewnij się, że Twoje środowisko ma npm CLI i że masz skonfigurowane odpowiednie uprawnienia, dzięki czemu nie musisz instalować pakietów jako administrator za pomocą polecenia sudo .
package.json i instalacja 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
To przeprowadzi Cię przez kreatora, aby dostarczyć potrzebnych informacji. Po utworzeniu pliku będzie on 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 warto się zapoznać, jeśli chcesz dowiedzieć się więcej o pakowaniu modułów i ogólnie tworzeniu kodu JavaScript. Ważnym elementem tego przewodnika jest obiekt "dependencies" . Ten obiekt będzie zawierał parę klucz-wartość zainstalowanej biblioteki i używanej 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 plik package.json , aby wyświetlić Firebase jako zależność:
"dependencies": {
"firebase": "^9.0.0"
},
Kluczem jest nazwa biblioteki, a wartością jest używana wersja. Wartość wersji jest elastyczna i może przyjmować 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 foldery kompilacji
Napisany przez Ciebie kod jest odczytywany i przetwarzany przez moduł pakujący, 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 podmioty pakujące moduły jest znany jako kod „źródłowy”. Pliki, które wyprowadzają, są znane jako kod kompilacji lub „dist” (dystrybucja).
Typową konfiguracją w bazach 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 przykładowej strukturze pliku powyżej, weź pod uwagę, że index.js importuje zarówno animations.js , jak i datalist.js . Gdy moduł pakujący przetwarza kod źródłowy, utworzy plik bundle.js w folderze dist . bundle.js jest kombinacją 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 pakiety modułów 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. Ten plik jest znany jako punkt wejścia.
Wróćmy do poprzedniego przykładu struktury pliku.
- 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 podmioty pakujące moduły do rozpoczęcia procesu łączenia.
Korzystanie z Firebase z pakietem internetowym
W przypadku aplikacji i pakietu internetowego Firebase nie jest wymagana żadna konkretna konfiguracja. W tej sekcji omówiono ogólną konfigurację pakietu internetowego .
Pierwszym krokiem jest zainstalowanie pakietu webpack 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 zainstalowaną 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 „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 w celu uruchomienia kompilacji 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 budowania 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, zapoznaj się z oficjalną dokumentacją dotyczącą ustawienia konfiguracji „tryb” .
Korzystanie z Firebase z pakietem zbiorczym
W przypadku aplikacji Firebase i Rollup 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 na zależności instalowane za pomocą 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 „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 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 budowania 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, zapoznaj się z oficjalną dokumentacją dotyczącą wtyczek do kompilacji produkcyjnych .
Korzystanie z Firebase z esbuild
Aplikacje Firebase i esbuild nie wymagają specjalnej konfiguracji. W tej sekcji omówiono 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 „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 do uruchomienia esbuilda. 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 budowania 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 do produkcji, zapoznaj się z oficjalną dokumentacją dotyczącą minifikacji i innych optymalizacji .