พัสดุ
เรียนรู้วิธีรวม Bootstrap ในโครงการของคุณโดยใช้ Parcel
ติดตั้งพัสดุ
ติดตั้งParcel Bundler
ติดตั้ง Bootstrap
ติดตั้ง bootstrapเป็นโมดูล Node.js โดยใช้ npm
Bootstrap ขึ้นอยู่กับPopperซึ่งระบุไว้ในpeerDependencies
คุณสมบัติ ซึ่งหมายความว่าคุณจะต้องตรวจสอบให้แน่ใจว่าได้เพิ่มทั้งสองอย่างลงในการpackage.json
ใช้npm install @popperjs/core
ของ คุณ
เมื่อเสร็จสิ้นทั้งหมด โครงการของคุณจะมีโครงสร้างดังนี้:
project-name/
├── build/
├── node_modules/
│ └── bootstrap/
│ └── popper.js/
├── scss/
│ └── custom.scss
├── src/
│ └── index.html
│ └── index.js
└── package.json
กำลังนำเข้า JavaScript
นำเข้าJavaScript ของ Bootstrapในจุดเริ่มต้นแอปของคุณ (โดยปกติคือsrc/index.js
) คุณสามารถนำเข้าปลั๊กอินทั้งหมดของเราในไฟล์เดียวหรือแยกกัน หากคุณต้องการเพียงส่วนย่อยของปลั๊กอินเหล่านี้
// Import all plugins
import * as bootstrap from 'bootstrap';
// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';
// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';
การนำเข้า CSS
เพื่อใช้ศักยภาพของ Bootstrap อย่างเต็มที่และปรับแต่งตามความต้องการของคุณ ให้ใช้ไฟล์ต้นฉบับเป็นส่วนหนึ่งของกระบวนการรวมกลุ่มของโปรเจ็กต์ของคุณ
สร้างของคุณเองscss/custom.scss
เพื่อนำเข้าไฟล์ Sass ของ Bootstrapแล้วแทนที่ตัวแปรที่กำหนดเองในตัว
สร้างแอป
รวมsrc/index.js
ก่อน</body>
แท็ก ปิด
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
แก้ไขpackage.json
เพิ่มdev
และbuild
สคริปต์ในpackage.json
ไฟล์ ของคุณ
"scripts": {
"dev": "parcel ./src/index.html",
"prebuild": "npx rimraf build",
"build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}
เรียกใช้สคริปต์ dev
แอปของคุณจะสามารถเข้าถึงได้http://127.0.0.1:1234
ที่
npm run dev
สร้างไฟล์แอพ
ไฟล์ที่สร้างอยู่ในbuild/
โฟลเดอร์
npm run build