Catch up on everything we announced at this year's Firebase Summit. Learn more

Использование сборщиков модулей с 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 используется для установки и управления зависимостями (библиотеками). Чтобы установить НПМ, установить Node.js , который включает в себя NPM автоматически.

Большинство разработчиков правильно настроены после установки Node.js. Однако есть общие проблемы, с которыми сталкиваются многие разработчики при настройке своей среды. Если возникнут какие - либо ошибки, убедитесь , что среда имеет CLI НПМ и что у вас есть соответствующие права доступа, таким образом Вы не должны устанавливать пакеты в качестве администратора с помощью команды 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, смотри руководство НПМ о семантической версионности .

Папки исходного кода и сборки

Код, который вы пишете, считывается и обрабатывается сборщиком модулей, а затем выводится как новый файл или набор файлов. Важно разделять эти два типа файлов. Код, который читают и обрабатывают сборщики модулей, известен как «исходный» код. Файлы, которые они выводят, известны как встроенный код или код дистрибутива.

Обычная установка в кодовом базе для хранения исходного кода в папке под названием 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 и веб-пакетов не требуется. Этот раздел охватывает общую конфигурацию 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 для загрузки документа «город».

// 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(),
  };
}

Следующим шагом является добавление сценария НПМ для запуска WebPack сборки. Откройте package.json файл и добавьте следующую пару ключей значения в "scripts" объект.

  "scripts": {
    "build": "webpack --mode=development"
  },

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

npm run build

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

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

Использование Firebase с Rollup

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

Первый шаг - установить 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(),
  };
}

Следующим шагом является добавление сценария НПМ для запуска накопительного сборки. Откройте 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(),
  };
}

Следующим шагом является добавление сценария НПМ для выполнения esbuild. Откройте package.json файл и добавьте следующую пару ключей значения в "scripts" объект.

  "scripts": {
    "build": "node ./esbuild.config.js"
  },

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

Для получения дополнительной информации по оптимизации esbuild для производства, увидеть их официальную документацию по минификация и других оптимизаций .