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