Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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