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

Firebaseでモジュールバンドラーを使用する

JavaScriptモジュールバンドラーは多くのことを実行できますが、最も便利な機能の1つは、コードベースに外部ライブラリを追加して使用する機能です。モジュールバンドラーは、コード内のインポートパスを読み取り、アプリケーション固有のコードをインポートされたライブラリコードと結合(バンドル)します。

バージョン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ロールアップ、およびesbuild

始めましょう

このガイドでは、開発環境にnpmをインストールする必要があります。 npmは、依存関係(ライブラリ)をインストールおよび管理するために使用されます。 NPMをインストールするには、 Node.jsのインストールNPM自動的に含まれ、。

Node.jsをインストールすると、ほとんどの開発者は適切にセットアップされます。ただし、多くの開発者が環境をセットアップするときに遭遇する一般的な問題があります。あなたが何らかのエラーに遭遇した場合は、ご使用の環境がNPMの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の詳細については、セマンティックバージョニングについてNPMのガイドを参照してください

ソースフォルダーとビルドフォルダー

作成したコードは、モジュールバンドラーによって読み取られて処理され、新しいファイルまたはファイルのセットとして出力されます。これらの2つのタイプのファイルを分離することが重要です。モジュールバンドラーが読み取って処理するコードは、「ソース」コードと呼ばれます。それらが出力するファイルは、ビルドコードまたは「配布」(配布)コードと呼ばれます。

コードベースでの一般的なセットアップと呼ばれるフォルダにソースコードを格納することでsrcという名前のフォルダに内蔵されたコードdist

- src
 |_ index.js
 |_ animations.js
 |_ datalist.js


- dist
 |_ bundle.js

上記の例のファイル構造では、と考えてindex.js輸入の両方animations.jsdatalist.js 。モジュールバンドラは、ソースコードを処理するときには、生成されますbundle.js中にファイルをdistフォルダ。 bundle.js内のファイルの組み合わせであるsrc輸入だけでなく、フォルダや任意のライブラリ。

あなたはこのようにGitなどのソース管理システムを使用している場合、無視するのが一般的であるdistメインリポジトリにこのコードを格納するときにフォルダを。

エントリポイント

モジュールバンドラーにはすべて、エントリポイントの概念があります。アプリケーションはファイルのツリーと考えることができます。あるファイルが別のファイルからコードをインポートするなど。これは、1つのファイルがツリーのルートになることを意味します。このファイルはエントリポイントと呼ばれます。

前のファイル構造の例に戻りましょう。

- 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それはアプリケーションのために必要なすべてのコードの輸入を開始しますので、ファイルはエントリポイントと考えられています。このエントリポイントファイルは、モジュールバンドラーがバンドルプロセスを開始するために使用します。

WebpackでFirebaseを使用する

Firebaseアプリとwebpackに必要な特定の構成はありません。このセクションでは、一般的なWebPACKの構成をカバー

最初のステップは、開発の依存関係としてnpmからwebpackをインストールすることです。

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をインポートして初期化し、FirestoreLiteを使用して「都市」ドキュメントを読み込みます。

// 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のビルドを最適化する方法の詳細については、上の彼らの公式ドキュメントを参照「モード」構成設定を

ロールアップでFirebaseを使用する

Firebaseアプリとロールアップに必要な特定の構成はありません。このセクションでは、一般的なロールアップ構成について説明します。

最初のステップは、npmでインストールされた依存関係にインポートをマップするために使用されるRollupとプラグインをインストールすることです。

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をインポートして初期化し、FirestoreLiteを使用して「都市」ドキュメントを読み込みます。

// 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あなたのバンドルアプリケーションと依存関係のコードが含まれています。

生産のためのあなたのロールアップのビルドの最適化の詳細については、公式ドキュメントを参照してください生産ビルド用のプラグインに

esbuildでFirebaseを使用する

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をインポートして初期化し、FirestoreLiteを使用して「都市」ドキュメントを読み込みます。

// 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の最適化の詳細については、彼らの公式ドキュメントを参照縮小およびその他の最適化にします