วิธีอื่นๆ ในการเพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript

เราขอแนะนำอย่างยิ่งให้ใช้ SDK ผ่าน npm สำหรับเว็บแอป Firebase ส่วนใหญ่ อย่างไรก็ตาม Firebase มีวิธีอื่นในการเพิ่ม SDK สำหรับผู้ใช้ที่มีข้อกำหนดพิเศษ หน้านี้แสดงวิธีการตั้งค่าโดยละเอียดสำหรับวิธีการอื่นเหล่านี้

CDN (เครือข่ายนำส่งข้อมูล)
npm สำหรับแอป Node.js

เมื่อใช้วิธีการเหล่านี้ คุณจะเพิ่มไลบรารีที่มีอยู่ ลงในแอปได้

จาก CDN

คุณสามารถกำหนดค่าการนำเข้าบางส่วนของ Firebase JavaScript SDK และโหลดเฉพาะ ผลิตภัณฑ์ของ Firebase ที่ต้องการได้ Firebase จัดเก็บไลบรารีแต่ละรายการของ Firebase JavaScript SDK ไว้ใน CDN (เครือข่ายนำส่งข้อมูล) ทั่วโลกของเรา

หากต้องการรวมเฉพาะผลิตภัณฑ์ของ Firebase (เช่น Authentication และ Cloud Firestore) ให้เพิ่ม สคริปต์ต่อไปนี้ที่ด้านล่างของแท็ก <body> แต่ก่อนที่จะใช้ บริการ Firebase

<body>
  <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->
  <script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/12.10.0/firebase-app.js'

    // If you enabled Analytics in your project, add the Firebase SDK for Google Analytics
    import { getAnalytics } from 'https://www.gstatic.com/firebasejs/12.10.0/firebase-analytics.js'

    // Add Firebase products that you want to use
    import { getAuth } from 'https://www.gstatic.com/firebasejs/12.10.0/firebase-auth.js'
    import { getFirestore } from 'https://www.gstatic.com/firebasejs/12.10.0/firebase-firestore.js'
  </script>
</body>

เพิ่มออบเจ็กต์การกำหนดค่า Firebase แล้วเริ่มต้น Firebase ใน แอปโดยใช้โค้ดต่อไปนี้

<body>
  <script type="module">
    // ...

    // TODO: Replace the following with your app's Firebase configuration
    const firebaseConfig = {
      // ...
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
  </script>
</body>

แอป Node.js

ติดตั้ง Firebase JavaScript SDK โดยทำดังนี้
1. หากยังไม่มีไฟล์ package.json ให้สร้างไฟล์ดังกล่าวโดย เรียกใช้คำสั่งต่อไปนี้จากรูทของโปรเจ็กต์ JavaScript
```
npm init
```
2. ติดตั้งแพ็กเกจ firebase npm และบันทึกลงในไฟล์ package.json โดยเรียกใช้คำสั่งต่อไปนี้
```
npm install --save firebase@12.10.0
```
ใช้ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้เพื่อใช้โมดูล Firebase ในแอป
- คุณสามารถ require โมดูลจากไฟล์ JavaScript ใดก็ได้
  
  หากต้องการรวมเฉพาะผลิตภัณฑ์ของ Firebase ที่ระบุ (เช่น Authentication และ Cloud Firestore) ให้ทำดังนี้
```
// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
var firebase = require("firebase/app");

// Add the Firebase products that you want to use
require("firebase/auth");
require("firebase/firestore");
```
  รวม Firebase JavaScript SDK ทั้งหมดแทนที่จะเป็น SDK แต่ละรายการ (ไม่แนะนำสำหรับแอปที่ใช้งานจริง)
  
  การโหลด SDK ทั้งหมดไม่มีประสิทธิภาพสำหรับ เว็บแอปที่ใช้งานจริง
  ใช้ตัวเลือกนี้เพื่อวัตถุประสงค์ในการพัฒนาเท่านั้น
```
var firebase = require("firebase");
```
- คุณสามารถใช้ไวยากรณ์ ESM เพื่อ import โมดูล
  
  หากต้องการรวมเฉพาะผลิตภัณฑ์ของ Firebase ที่ระบุ (เช่น Authentication และ Cloud Firestore) ให้ทำดังนี้
```
// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";
import "firebase/firestore";
```
  รวม Firebase JavaScript SDK ทั้งหมดแทนที่จะเป็น SDK แต่ละรายการ (ไม่แนะนำสำหรับแอปที่ใช้งานจริง)
  
  การโหลด SDK ทั้งหมดไม่มีประสิทธิภาพสำหรับ เว็บแอปที่ใช้งานจริง
  ใช้ตัวเลือกนี้เพื่อวัตถุประสงค์ในการพัฒนาเท่านั้น
```
import firebase from "firebase";
```

import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase configuration
const firebaseConfig = {
  //...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);