Catch up on everthing we announced at this year's Firebase Summit. 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 build akhir 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 pada meliputi menggunakan 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 meliputi 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 CLI NPM dan bahwa Anda memiliki izin yang tepat mengatur sehingga Anda tidak perlu menginstal paket sebagai administrator dengan perintah sudo .

package.json dan menginstal Firebase

Setelah Anda NPM terinstal, anda akan perlu membuat package.json file pada akar 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 jika Anda ingin mempelajari lebih lanjut tentang bundling modul dan membangun kode JavaScript secara umum. Bagian penting untuk panduan ini adalah "dependencies" objek. 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

Ketika Anda menjalankan npm i firebase , proses instalasi akan memperbarui package.json ke daftar 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 bundler modul 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 ke kode sumber toko dalam folder bernama src dan kode dibangun dalam folder bernama dist .

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


- dist
 |_ bundle.js

Dalam struktur file contoh di atas, pertimbangkan bahwa index.js impor baik animations.js dan datalist.js . Ketika bundler modul memproses kode sumber itu akan menghasilkan bundle.js file dalam dist folder. The bundle.js adalah kombinasi dari file dalam src folder dan setiap perpustakaan impor juga.

Jika Anda menggunakan sistem kontrol sumber seperti Git, itu adalah umum untuk mengabaikan dist folder ketika menyimpan kode ini dalam 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);
});

The src/index.js berkas dianggap entry point karena diawali impor semua kode yang dibutuhkan 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 pada akar proyek bernama lokal Anda 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 membangun. Buka package.json berkas dan menambahkan kunci pasangan nilai berikut untuk "scripts" objek.

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

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

npm run build

Akhirnya, periksa dist folder build. Ini harus berisi sebuah file bernama bundle.js yang berisi aplikasi Anda dibundel dan kode ketergantungan.

Untuk informasi lebih lanjut tentang mengoptimalkan Webpack Anda membangun untuk produksi, lihat dokumentasi resmi mereka pada "mode" pengaturan konfigurasi .

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 pada akar proyek bernama lokal Anda 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 script NPM untuk menjalankan rollup membangun. Buka package.json berkas dan menambahkan kunci pasangan nilai berikut untuk "scripts" objek.

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

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

npm run build

Akhirnya, periksa dist folder build. Ini harus berisi sebuah file bernama bundle.js yang berisi aplikasi Anda dibundel dan kode ketergantungan.

Untuk informasi lebih lanjut tentang mengoptimalkan Rollup Anda membangun untuk produksi, lihat dokumentasi resmi mereka pada plugin untuk produksi membangun .

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 pada akar proyek bernama lokal Anda 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 script NPM untuk jangka esbuild. Buka package.json berkas dan menambahkan kunci pasangan nilai berikut untuk "scripts" objek.

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

Akhirnya, periksa dist folder build. Ini harus berisi sebuah file bernama bundle.js yang berisi aplikasi Anda dibundel dan kode ketergantungan.

Untuk informasi lebih lanjut tentang mengoptimalkan esbuild untuk produksi, lihat dokumentasi resmi mereka pada minification dan optimasi lainnya .