Check out what’s new from Firebase at Google I/O 2022. Learn more

Menggunakan bundler modul dengan Firebase

Pembundel modul JavaScript dapat melakukan banyak hal, tetapi salah satu fiturnya yang paling berguna adalah kemampuan untuk menambahkan dan menggunakan pustaka eksternal di basis kode Anda. Pembundel modul membaca jalur impor dalam kode Anda dan menggabungkan (menggabungkan) kode khusus aplikasi Anda dengan kode pustaka yang diimpor.

Dari versi 9 dan yang lebih tinggi, Firebase JavaScript SDK dioptimalkan untuk bekerja dengan fitur pengoptimalan bundler modul untuk mengurangi jumlah kode Firebase yang disertakan dalam versi final Anda.

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.
 */

Proses menghilangkan kode yang tidak digunakan dari perpustakaan ini dikenal sebagai pengocokan pohon. Akan sangat memakan waktu dan rawan kesalahan untuk menghapus kode ini secara manual, tetapi pembuat modul dapat mengotomatiskan penghapusan ini.

Ada banyak bundler modul berkualitas tinggi di ekosistem JavaScript. Panduan ini difokuskan untuk mencakup penggunaan Firebase dengan webpack , Rollup , dan esbuild .

Memulai

Panduan ini mengharuskan Anda untuk menginstal npm di lingkungan pengembangan Anda. npm digunakan untuk menginstal dan mengelola dependensi (perpustakaan). Untuk menginstal npm, instal Node.js , yang menyertakan npm secara otomatis.

Sebagian besar pengembang telah diatur dengan benar setelah mereka menginstal Node.js. Namun, ada masalah umum yang dihadapi banyak pengembang saat menyiapkan lingkungan mereka. Jika Anda mengalami kesalahan, pastikan lingkungan Anda memiliki npm CLI dan Anda telah mengatur izin yang tepat sehingga Anda tidak perlu menginstal paket sebagai administrator dengan perintah Sudo .

package.json dan menginstal Firebase

Setelah Anda menginstal npm, Anda perlu membuat file package.json di root proyek lokal Anda. Hasilkan file ini dengan perintah npm berikut:

npm init

Ini akan membawa Anda melalui wizard untuk memberikan informasi yang dibutuhkan. Setelah file dibuat, tampilannya akan seperti berikut:

{
  "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": {

  }
}

File ini bertanggung jawab untuk banyak hal yang berbeda. Ini adalah file penting untuk membiasakan diri Anda jika Anda ingin mempelajari lebih lanjut tentang bundling modul dan membangun kode JavaScript secara umum. Bagian penting untuk panduan ini adalah objek "dependencies" . Objek ini akan menyimpan pasangan nilai kunci dari pustaka yang telah Anda instal dan versi yang digunakannya.

Menambahkan dependensi dilakukan melalui npm install atau npm i perintah.

npm i firebase

Saat Anda menjalankan npm i firebase , proses instalasi akan memperbarui package.json untuk mencantumkan Firebase sebagai dependensi:

  "dependencies": {
    "firebase": "^9.0.0"
  },

Kuncinya adalah nama perpustakaan dan nilainya adalah versi yang akan digunakan. Nilai versi fleksibel dan dapat menerima rentang nilai. Ini dikenal sebagai versi semantik atau semver. Untuk mempelajari lebih lanjut tentang semver, lihat panduan npm tentang versi semantik .

Sumber vs folder build

Kode yang Anda tulis dibaca dan diproses oleh modul bundler dan kemudian dikeluarkan sebagai file baru atau kumpulan file. Sangat penting untuk memisahkan kedua jenis file ini. Kode yang dibaca dan diproses oleh bundler modul dikenal sebagai kode "sumber". File yang mereka hasilkan dikenal sebagai kode bawaan atau "dist" (distribusi).

Pengaturan umum dalam basis kode adalah menyimpan kode sumber dalam folder bernama src dan kode bawaan dalam folder bernama dist .

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


- dist
 |_ bundle.js

Dalam contoh struktur file di atas, pertimbangkan bahwa index.js mengimpor animations.js dan datalist.js . Ketika bundler modul memproses kode sumber, itu akan menghasilkan file bundle.js di folder dist . bundle.js adalah kombinasi dari file di folder src dan semua perpustakaan yang diimpor juga.

Jika Anda menggunakan sistem kontrol sumber seperti Git, folder dist biasanya diabaikan saat menyimpan kode ini di repositori utama.

Titik masuk

Pembundel modul semuanya memiliki konsep titik masuk. Anda dapat menganggap aplikasi Anda sebagai pohon file. Satu file mengimpor kode dari yang lain dan seterusnya dan seterusnya. Ini berarti bahwa satu file akan menjadi root dari pohon. File ini dikenal sebagai titik masuk.

Mari kita lihat kembali contoh struktur file sebelumnya.

- 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);
});

File src/index.js dianggap sebagai titik masuk karena memulai impor semua kode yang diperlukan untuk aplikasi. File titik masuk ini digunakan oleh bundler modul untuk memulai proses bundling.

Menggunakan Firebase dengan webpack

Tidak ada konfigurasi khusus yang diperlukan untuk aplikasi dan webpack Firebase. Bagian ini mencakup konfigurasi webpack umum .

Langkah pertama adalah menginstal webpack dari npm sebagai dependensi pengembangan.

npm i webpack webpack-cli -D

Buat file di root proyek lokal Anda bernama webpack.config.js dan tambahkan kode berikut.

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',
};

Kemudian pastikan Anda telah menginstal Firebase sebagai dependensi.

npm i firebase

Kemudian inisialisasi Firebase di basis kode Anda. Kode berikut mengimpor dan menginisialisasi Firebase dalam file titik masuk dan menggunakan Firestore Lite untuk memuat dokumen "kota".

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

Langkah selanjutnya adalah menambahkan script npm untuk menjalankan webpack build. Buka file package.json dan tambahkan pasangan nilai kunci berikut ke objek "scripts" .

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

Untuk menjalankan webpack dan menghasilkan folder build, jalankan perintah berikut.

npm run build

Terakhir, periksa folder dist build. Itu harus berisi file bernama bundle.js yang berisi aplikasi yang dibundel dan kode dependensi Anda.

Untuk informasi lebih lanjut tentang mengoptimalkan build webpack Anda untuk produksi, lihat dokumentasi resmi mereka di pengaturan konfigurasi "mode" .

Menggunakan Firebase dengan Rollup

Tidak ada konfigurasi khusus yang diperlukan untuk aplikasi dan Rollup Firebase. Bagian ini mencakup konfigurasi Rollup umum.

Langkah pertama adalah menginstal Rollup dan plugin yang digunakan untuk memetakan impor ke dependensi yang diinstal dengan npm.

npm i rollup @rollup/plugin-node-resolve -D

Buat file di root proyek lokal Anda bernama rollup.config.js dan tambahkan kode berikut.

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

Kemudian inisialisasi Firebase di basis kode Anda. Kode berikut mengimpor dan menginisialisasi Firebase dalam file titik masuk dan menggunakan Firestore Lite untuk memuat dokumen "kota".

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

Langkah selanjutnya adalah menambahkan skrip npm untuk menjalankan rollup build. Buka file package.json dan tambahkan pasangan nilai kunci berikut ke objek "scripts" .

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

Untuk menjalankan rollup dan menghasilkan folder build, jalankan perintah berikut.

npm run build

Terakhir, periksa folder dist build. Itu harus berisi file bernama bundle.js yang berisi aplikasi yang dibundel dan kode dependensi Anda.

Untuk informasi selengkapnya tentang pengoptimalan Rollup build untuk produksi, lihat dokumentasi resmi mereka tentang plugin untuk build produksi .

Menggunakan Firebase dengan esbuild

Tidak ada konfigurasi khusus yang diperlukan untuk aplikasi dan esbuild Firebase. Bagian ini mencakup konfigurasi esbuild umum.

Langkah pertama adalah menginstal esbuild sebagai dependensi pengembangan.

npm i esbuild -D

Buat file di root proyek lokal Anda bernama esbuild.config.js dan tambahkan kode berikut.

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))

Kemudian inisialisasi Firebase di basis kode Anda. Kode berikut mengimpor dan menginisialisasi Firebase dalam file titik masuk dan menggunakan Firestore Lite untuk memuat dokumen "kota".

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

Langkah selanjutnya adalah menambahkan skrip npm untuk menjalankan esbuild. Buka file package.json dan tambahkan pasangan nilai kunci berikut ke objek "scripts" .

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

Terakhir, periksa folder dist build. Itu harus berisi file bernama bundle.js yang berisi aplikasi yang dibundel dan kode dependensi Anda.

Untuk informasi lebih lanjut tentang mengoptimalkan esbuild untuk produksi, lihat dokumentasi resmi mereka tentang minifikasi dan pengoptimalan lainnya .