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 生態系統中有許多高質量的模塊打包器。本指南的重點是使用火力地堡與覆蓋的WebPack匯總,並esbuild

開始

本指南要求您在開發環境中安裝 npm。 npm 用於安裝和管理依賴項(庫)。要安裝NPM,安裝Node.js的,其中NPM自動包括。

大多數開發人員在安裝 Node.js 後就已正確設置。但是,許多開發人員在設置環境時會遇到一些常見問題。如果您遇到任何錯誤,請確保您的環境有故宮CLI以及是否有建立適當的權限,所以你不必安裝軟件包與sudo命令管理員

package.json 並安裝 Firebase

一旦你已經安裝了故宮,您將需要創建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 installnpm i的命令。

npm i firebase

當您運行npm i firebase ,安裝過程將更新package.json到列表火力地堡作為一個依賴:

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

鍵是庫的名稱,值是要使用的版本。版本值是靈活的,可以接受一系列值。這稱為語義版本控製或 semver。要了解更多關於semver,看到故宮的關於語義版本指南

源與構建文件夾

您編寫的代碼由模塊捆綁器讀取和處理,然後作為新文件或文件集輸出。將這兩種類型的文件分開很重要。模塊打包器讀取和處理的代碼稱為“源”代碼。他們輸出的文件被稱為構建或“dist”(分發)代碼。

在代碼庫的一個常見的設置是將存儲源代碼放在一個文件夾,名為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在主庫中存儲的代碼時,文件夾。

入口點

模塊打包器都有一個入口點的概念。您可以將您的應用程序視為文件樹。一個文件從另一個文件導入代碼,依此類推。這意味著一個文件將成為樹的根。此文件稱為入口點。

讓我們重溫之前的文件結構示例。

- 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 與 webpack 結合使用

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,並使用 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(),
  };
}

接下來的一步是添加一個NPM腳本來運行的WebPack版本。打開package.json文件,下面的鍵值對添加到"scripts"對象。

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

要運行 webpack 並生成構建文件夾,請運行以下命令。

npm run build

最後,檢查dist build文件夾。它應該包含一個文件名為bundle.js包含您的應用程序捆綁和依賴代碼。

有關為生產優化的WebPack版本的詳細信息,請參閱其官方文檔的“模式”配置設置

將 Firebase 與 Rollup 結合使用

Firebase 應用程序和 Rollup 不需要特定的配置。本節介紹一般匯總配置。

第一步是安裝 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(),
  };
}

接下來的一步是添加一個NPM腳本來運行程序匯總版本。打開package.json文件,下面的鍵值對添加到"scripts"對象。

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

要運行匯總並生成構建文件夾,請運行以下命令。

npm run build

最後,檢查dist build文件夾。它應該包含一個文件名為bundle.js包含您的應用程序捆綁和依賴代碼。

有關為生產優化匯總版本的詳細信息,請參閱其官方文檔上的插件產品構建

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

接下來的步驟是一個NPM腳本添加到運行esbuild。打開package.json文件,下面的鍵值對添加到"scripts"對象。

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

最後,檢查dist build文件夾。它應該包含一個文件名為bundle.js包含您的應用程序捆綁和依賴代碼。

有關為生產優化esbuild的更多信息,請參閱其官方文檔上縮小和其他優化