Сборщики модулей JavaScript могут делать многое, но одна из их наиболее полезных функций — это возможность добавлять и использовать внешние библиотеки в вашей кодовой базе. Сборщики модулей считывают пути импорта в вашем коде и объединяют (складывают) код, специфичный для вашего приложения, с кодом импортированной библиотеки.
Начиная с версии 9 и выше, модульный API Firebase JavaScript оптимизирован для работы с функциями оптимизации сборщиков модулей, что позволяет уменьшить объем кода Firebase, включаемого в итоговую сборку.
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.
*/
Процесс удаления неиспользуемого кода из библиотеки называется «удалением ненужного кода» (tree shaking). Ручное удаление этого кода было бы чрезвычайно трудоемким и чревато ошибками, но сборщики модулей могут автоматизировать этот процесс.
В экосистеме JavaScript существует множество высококачественных сборщиков модулей. Это руководство посвящено использованию Firebase с webpack , Rollup и esbuild .
Начать
Для работы с этим руководством необходимо установить npm в вашей среде разработки. npm используется для установки и управления зависимостями (библиотеками). Чтобы установить npm, установите Node.js , который автоматически включает npm.
Большинство разработчиков успешно настраивают Node.js после его установки. Однако при настройке среды часто возникают распространенные проблемы. Если вы столкнулись с какими-либо ошибками, убедитесь, что в вашей среде установлен интерфейс командной строки npm и что у вас есть необходимые права доступа, чтобы вам не приходилось устанавливать пакеты от имени администратора с помощью команды sudo .
package.json и установка Firebase
После установки npm вам потребуется создать файл package.json в корневой директории вашего локального проекта. Сгенерируйте этот файл с помощью следующей команды npm:
npm init
Это проведет вас через мастер ввода необходимой информации. После создания файл будет выглядеть примерно так:
{
"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": {
}
}
Этот файл отвечает за множество различных функций. Ознакомиться с ним важно, если вы хотите узнать больше о сборке модулей и создании JavaScript-кода в целом. Для данного руководства важна часть, содержащая объект "dependencies" . Этот объект будет хранить пару ключ-значение, указывающую на установленную библиотеку и её используемую версию.
Добавление зависимостей осуществляется с помощью команд npm install или npm i .
npm i firebase
При выполнении команды npm i firebase процесс установки обновит package.json , добавив Firebase в список зависимостей:
"dependencies": {
"firebase": "^9.0.0"
},
Ключом является название библиотеки, а значением — используемая версия. Значение версии является гибким и может принимать диапазон значений. Это называется семантическим версионированием или semver. Чтобы узнать больше о semver, см. руководство npm по семантическому версионированию .
Папки исходного кода и папки сборки
Написанный вами код считывается и обрабатывается сборщиком модулей, а затем выводится в виде нового файла или набора файлов. Важно разделять эти два типа файлов. Код, который считывают и обрабатывают сборщики модулей, называется «исходным» кодом. Файлы, которые они выводят, называются собранным кодом или «дистрибутивным» кодом.
В кодовых базах часто используется схема хранения исходного кода в папке с именем src , а скомпилированного кода — в папке с именем dist .
- src
|_ index.js
|_ animations.js
|_ datalist.js
- dist
|_ bundle.js
В приведенной выше структуре файлов учтите, что index.js импортирует как animations.js , так и datalist.js . Когда сборщик модулей обрабатывает исходный код, он создает файл bundle.js в папке dist . Файл bundle.js представляет собой комбинацию файлов из папки src и любых библиотек, которые он импортирует.
Если вы используете системы контроля версий, такие как Git, то при хранении этого кода в основном репозитории обычно игнорируется папка dist .
Точки входа
Все сборщики модулей используют концепцию точки входа. Представьте себе ваше приложение как дерево файлов. Один файл импортирует код из другого, и так далее. Это означает, что один файл будет корнем дерева. Этот файл называется точкой входа.
Давайте вернемся к предыдущему примеру структуры файла.
- 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);
});
Файл src/index.js считается точкой входа, поскольку именно с него начинается импорт всего необходимого кода для приложения. Этот файл используется сборщиками модулей для начала процесса сборки.
Использование Firebase с webpack
Для приложений Firebase и webpack не требуется никакой специальной настройки. В этом разделе рассматривается общая конфигурация webpack .
Первым шагом является установка webpack из npm в качестве зависимости для разработки.
npm i webpack webpack-cli -D
Создайте в корневой директории вашего локального проекта файл с именем webpack.config.js и добавьте в него следующий код.
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',
};
Затем убедитесь, что у вас установлен Firebase в качестве зависимости.
npm i firebase
Затем инициализируйте Firebase в своей кодовой базе. Следующий код импортирует и инициализирует Firebase в файле точки входа и использует Firestore Lite для загрузки документа "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(),
};
}
Следующий шаг — добавить npm-скрипт для запуска сборки webpack. Откройте файл package.json и добавьте следующую пару ключ-значение в объект "scripts" .
"scripts": {
"build": "webpack --mode=development"
},
Для запуска webpack и создания папки сборки выполните следующую команду.
npm run build
Наконец, проверьте папку сборки dist . В ней должен находиться файл bundle.js , содержащий ваше собранное приложение и код зависимостей.
Для получения дополнительной информации об оптимизации сборки webpack для продакшена см. официальную документацию по параметру конфигурации "mode" .
Использование Firebase с Rollup
Для приложений Firebase и Rollup не требуется никакой специальной настройки. В этом разделе рассматривается общая настройка Rollup.
Первый шаг — установить Rollup и плагин, используемый для сопоставления импортов с зависимостями, установленными с помощью npm.
npm i rollup @rollup/plugin-node-resolve -D
Создайте в корневой папке вашего локального проекта файл с именем rollup.config.js и добавьте в него следующий код.
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()]
};
Затем инициализируйте Firebase в своей кодовой базе. Следующий код импортирует и инициализирует Firebase в файле точки входа и использует Firestore Lite для загрузки документа "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(),
};
}
Следующий шаг — добавить npm-скрипт для запуска сборки Rollup. Откройте файл package.json и добавьте следующую пару ключ-значение в объект "scripts" .
"scripts": {
"build": "rollup -c rollup.config.js"
},
Для запуска Rollup и создания папки сборки выполните следующую команду.
npm run build
Наконец, проверьте папку сборки dist . В ней должен находиться файл bundle.js , содержащий ваше собранное приложение и код зависимостей.
Для получения дополнительной информации об оптимизации сборки Rollup для производственной среды см. официальную документацию по плагинам для производственных сборок .
Использование Firebase с esbuild
Для приложений Firebase и esbuild не требуется никакой специальной настройки. В этом разделе рассматривается общая конфигурация esbuild.
Первым шагом является установка esbuild в качестве зависимости для разработки.
npm i esbuild -D
Создайте в корневой директории вашего локального проекта файл с именем esbuild.config.js и добавьте в него следующий код.
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))
Затем инициализируйте Firebase в своей кодовой базе. Следующий код импортирует и инициализирует Firebase в файле точки входа и использует Firestore Lite для загрузки документа "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(),
};
}
Следующий шаг — добавить npm-скрипт для запуска esbuild. Откройте файл package.json и добавьте следующую пару ключ-значение в объект "scripts" .
"scripts": {
"build": "node ./esbuild.config.js"
},
Наконец, проверьте папку сборки dist . В ней должен находиться файл bundle.js , содержащий ваше собранное приложение и код зависимостей.
Для получения дополнительной информации об оптимизации esbuild для производственной среды см. официальную документацию по минификации и другим оптимизациям .