本頁面由 Cloud Translation API 翻譯而成。

搭配 Firebase 使用模組組合器

JavaScript 模組封裝工具可執行許多作業，但其中一項最實用功能可讓您在程式碼集中新增及使用外部程式庫。模組組合器會讀取程式碼中的匯入路徑，然後合併 (軟體包) 加入應用程式專屬的程式碼與匯入的程式庫程式碼

從第 9 版或更高版本開始，Firebase JavaScript 模組化 API 已經過最佳化處理可減少 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"
  },

鍵是程式庫名稱，值則是要使用的版本。 version 值可以彈性調整，且可以接受特定範圍的值。也就是語意版本管理或 semver如要進一步瞭解 Semver 請參閱 npm 的語意版本管理指南。

來源與建構資料夾

您編寫的程式碼會由模組封裝工具讀取及處理，然後以下列形式輸出：或一組新檔案請務必區分這兩種檔案。模組組合工具讀取和處理的程式碼稱為「來源」再也不是件繁重乏味的工作輸出的檔案則稱為「dist」或「dist」(發布) 程式碼。

程式碼集的常見設定，是將原始碼儲存在名為 src 的資料夾而建構的程式碼位於名為 dist 的資料夾中

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


- dist
 |_ bundle.js

在上述範例檔案結構中，假設 index.js 會匯入這兩種 animations.js和datalist.js。模組整合工具處理原始碼時程式碼就會產生 dist 資料夾中的 bundle.js 檔案。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 檔案開始會匯入所有需要的應用程式程式碼。這個進入點檔案是以便啟動應用程式套件程序。

搭配 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，並使用 Firestore Lite 載入「city」文件。

// 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 應用程式和綜覽功能不需要特定設定。這個部分涵蓋一般匯總設定

首先安裝 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 載入「city」文件。

// 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，包含封裝的應用程式和依附元件程式碼。

如要進一步瞭解如何將 Rollup 版本最佳化，以針對正式版進行相關作業，請參閱正式版外掛程式的官方說明文件。

將 Firebase 與 esbuild 搭配使用

Firebase 應用程式和建構程序不需要特定設定。這個一節涵蓋了一般的建構設定。

第一步是安裝 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 載入「city」文件。

// 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，包含封裝的應用程式和依附元件程式碼。

如要進一步瞭解如何針對實際工作環境最佳化，請前往他們的官方網站有關壓縮和其他最佳化作業的說明文件。