Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Использование сборщиков модулей с Firebase

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Сборщики модулей JavaScript могут делать многое, но одной из их наиболее полезных функций является возможность добавлять и использовать внешние библиотеки в базе кода. Сборщики модулей считывают пути импорта в вашем коде и комбинируют (связывают) код вашего приложения с кодом импортированной библиотеки.

Начиная с версии 9 и выше, Firebase JavaScript SDK оптимизирован для работы с функциями оптимизации сборщиков модулей, чтобы уменьшить объем кода 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.
 */

Этот процесс удаления неиспользуемого кода из библиотеки известен как встряхивание дерева. Было бы чрезвычайно много времени и подвержено ошибкам, чтобы удалить этот код вручную, но сборщики модулей могут автоматизировать это удаление.

В экосистеме 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 с веб-пакетом

Для приложений Firebase и веб-пакета не требуется специальной настройки. В этом разделе рассматривается общая конфигурация веб-пакета .

Первым шагом является установка веб-пакета из 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 для загрузки документа «город».

// 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"
  },

Чтобы запустить веб-пакет и создать папку сборки, выполните следующую команду.

npm run build

Наконец, проверьте папку сборки dist . Он должен содержать файл с именем bundle.js , который содержит ваше связанное приложение и код зависимостей.

Для получения дополнительной информации об оптимизации сборки веб-пакета для производства см. их официальную документацию по параметру конфигурации «режим» .

Использование 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 для загрузки документа «город».

// 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 для запуска сборки накопительного пакета. Откройте файл package.json и добавьте следующую пару "ключ-значение" в объект "scripts" .

  "scripts": {
    "build": "rollup -c rollup.config.js"
  },

Чтобы запустить накопительный пакет и создать папку сборки, выполните следующую команду.

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 для загрузки документа «город».

// 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 для производства см. их официальную документацию по минификации и другим оптимизациям .