กลุ่มโมดูล 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 คู่มือนี้เน้นที่การครอบคลุมการใช้ Firebase ด้วย webpack , Rollup และ 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"
},
กุญแจสำคัญคือชื่อของไลบรารี่และค่าคือเวอร์ชันที่จะใช้ ค่าเวอร์ชันมีความยืดหยุ่นและสามารถยอมรับช่วงของค่าได้ นี้เรียกว่าการกำหนดเวอร์ชันเชิงความหมายหรือ semver หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ semver โปรดดูคำแนะนำของ npm เกี่ยวกับการกำหนดเวอร์ชันเชิงความหมาย
ซอร์ส vs โฟลเดอร์บิลด์
รหัสที่คุณเขียนจะถูกอ่านและประมวลผลโดยโมดูลบันเดิล แล้วส่งออกเป็นไฟล์ใหม่หรือชุดของไฟล์ การแยกไฟล์สองประเภทนี้ออกเป็นสิ่งสำคัญ รหัสที่กลุ่มโมดูลอ่านและประมวลผลเรียกว่ารหัส "ต้นทาง" ไฟล์ที่ส่งออกเรียกว่าโค้ดที่สร้างหรือ "dist" (แจกจ่าย)
การตั้งค่าทั่วไปในฐานโค้ดคือการจัดเก็บซอร์สโค้ดในโฟลเดอร์ชื่อ src
และโค้ดที่สร้างไว้ในโฟลเดอร์ชื่อ dist
- src
|_ index.js
|_ animations.js
|_ datalist.js
- dist
|_ bundle.js
ในโครงสร้างไฟล์ตัวอย่างด้านบน ให้พิจารณาว่า index.js
นำเข้าทั้ง animations.js
และ datalist.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 ทั่วไป
ขั้นตอนแรกคือการติดตั้ง webpack จาก npm เป็นการพึ่งพาการพัฒนา
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 build เปิดไฟล์ package.json
และเพิ่มคู่ค่าคีย์ต่อไปนี้ในอ็อบเจ็กต์ "scripts"
"scripts": {
"build": "webpack --mode=development"
},
ในการรัน webpack และสร้างโฟลเดอร์ build ให้รันคำสั่งต่อไปนี้
npm run build
สุดท้าย ตรวจสอบโฟลเดอร์ dist
build ควรมีไฟล์ชื่อ bundle.js
ซึ่งประกอบด้วยแอปพลิเคชันและโค้ดการพึ่งพาที่รวมกลุ่มไว้
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเพิ่มประสิทธิภาพการสร้าง webpack ของคุณสำหรับการผลิต โปรดดูเอกสารอย่างเป็นทางการเกี่ยวกับ การตั้งค่าการกำหนดค่า "โหมด"
การใช้ Firebase กับ Rollup
ไม่จำเป็นต้องมีการกำหนดค่าเฉพาะสำหรับแอป 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 เพื่อโหลดเอกสาร "เมือง"
// 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
ซึ่งประกอบด้วยแอปพลิเคชันและโค้ดการพึ่งพาที่รวมกลุ่มไว้
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเพิ่มประสิทธิภาพ Rollup ของคุณสำหรับการผลิต โปรดดูเอกสารประกอบอย่างเป็นทางการ เกี่ยวกับปลั๊กอินสำหรับบิล ด์ที่ใช้งานจริง
การใช้ 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 สำหรับการผลิต โปรดดูเอกสารอย่างเป็นทางการ เกี่ยวกับการลดขนาดและการเพิ่มประสิทธิภาพอื่นๆ