Bootstrap & Parcel

คู่มืออย่างเป็นทางการสำหรับวิธีรวมและรวม CSS และ JavaScript ของ Bootstrap ในโครงการของคุณโดยใช้ Parcel

ในหน้านี้

ต้องการข้ามไปยังจุดสิ้นสุด? ดาวน์โหลดซอร์สโค้ดและการสาธิตการใช้งานสำหรับคู่มือนี้จากที่ เก็บtwbs/examples คุณยังสามารถ เปิดตัวอย่างใน StackBlitzได้ แต่ไม่สามารถเรียกใช้ได้ เนื่องจาก Parcel ยังไม่ได้รับการสนับสนุนในขณะนี้

ติดตั้ง

เรากำลังสร้างโครงการ Parcel ด้วย Bootstrap ตั้งแต่เริ่มต้น ดังนั้นจึงมีข้อกำหนดเบื้องต้นบางประการและขั้นตอนเบื้องต้นก่อนที่เราจะเริ่มต้นได้จริงๆ คู่มือนี้กำหนดให้คุณต้องติดตั้ง Node.js และความคุ้นเคยกับเทอร์มินัล

สร้างโฟลเดอร์โครงการและตั้งค่า npm เราจะสร้างmy-projectโฟลเดอร์และเริ่มต้น npm ด้วย-yอาร์กิวเมนต์เพื่อหลีกเลี่ยงไม่ให้ถามคำถามแบบโต้ตอบทั้งหมดกับเรา
```
mkdir my-project && cd my-project
npm init -y
```
ติดตั้งพัสดุ. ไม่เหมือนกับคู่มือ Webpack ของเรา มีเพียงการพึ่งพาเครื่องมือสร้างเดียวเท่านั้นที่นี่ Parcel จะติดตั้งเครื่องแปลงภาษา (เช่น Sass) โดยอัตโนมัติเมื่อตรวจพบ เราใช้--save-devเพื่อส่งสัญญาณว่าการพึ่งพานี้มีไว้สำหรับใช้ในการพัฒนาเท่านั้นไม่ใช่สำหรับการผลิต
```
npm i --save-dev parcel
```
ติดตั้ง Bootstrap ตอนนี้เราสามารถติดตั้ง Bootstrap นอกจากนี้เรายังจะติดตั้ง Popper เนื่องจากดรอปดาวน์ ป๊อปโอเวอร์ และคำแนะนำเครื่องมือของเราขึ้นอยู่กับการวางตำแหน่ง หากคุณไม่ได้วางแผนที่จะใช้ส่วนประกอบเหล่านั้น คุณสามารถละเว้น Popper ได้ที่นี่
```
npm i --save bootstrap @popperjs/core
```

ตอนนี้เราได้ติดตั้งการพึ่งพาที่จำเป็นทั้งหมดแล้ว เราจึงเริ่มสร้างไฟล์โครงการและนำเข้า Bootstrap ได้

โครงสร้างโครงการ

เราได้สร้างmy-projectโฟลเดอร์และเริ่มต้น npm แล้ว ตอนนี้ เราจะสร้างsrcโฟลเดอร์ สไตล์ชีต และไฟล์ JavaScript เพื่อปัดเศษโครงสร้างโครงการ เรียกใช้สิ่งต่อไปนี้จากmy-projectหรือสร้างโฟลเดอร์และโครงสร้างไฟล์ด้วยตนเองตามที่แสดงด้านล่าง

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

เมื่อเสร็จแล้ว โปรเจ็กต์ที่สมบูรณ์ของคุณควรมีลักษณะดังนี้:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json

ณ จุดนี้ทุกอย่างอยู่ในตำแหน่งที่ถูกต้อง แต่ Parcel ต้องการหน้า HTML และสคริปต์ npm เพื่อเริ่มต้นเซิร์ฟเวอร์ของเรา

กำหนดค่าพัสดุ

เมื่อติดตั้งการพึ่งพาและโฟลเดอร์โครงการของเราพร้อมให้เราเริ่มเขียนโค้ดแล้ว ตอนนี้เราสามารถกำหนดค่า Parcel และเรียกใช้โครงการของเราในเครื่องได้ ตัวพัสดุเองไม่ต้องการไฟล์กำหนดค่าโดยการออกแบบ แต่เราจำเป็นต้องมีสคริปต์ npm และไฟล์ HTML เพื่อเริ่มต้นเซิร์ฟเวอร์ของเรา

กรอกsrc/index.htmlไฟล์. Parcel จำเป็นต้องมีเพจเพื่อแสดงผล ดังนั้นเราจึงใช้index.htmlเพจของเราในการตั้งค่า HTML พื้นฐาน รวมถึงไฟล์ CSS และ JavaScript
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>
```
เรากำลังรวมสไตล์ Bootstrap ไว้ที่นี่ด้วยdiv class="container"และ<button>เพื่อให้เราเห็นเมื่อ Webpack โหลด CSS ของ Bootstrap

Parcel จะตรวจพบโดยอัตโนมัติว่าเรากำลังใช้ Sass และติดตั้งปลั๊กอิน Sass Parcelเพื่อรองรับ อย่างไรก็ตาม หากต้องการ คุณสามารถเรียกใช้ด้วยnpm i --save-dev @parcel/transformer-sassตนเอง
เพิ่มสคริปต์ Parcel npm เปิดpackage.jsonและเพิ่มstartสคริปต์ต่อไปนี้ให้กับscriptsวัตถุ เราจะใช้สคริปต์นี้เพื่อเริ่มเซิร์ฟเวอร์การพัฒนา Parcel และแสดงไฟล์ HTML ที่เราสร้างขึ้นหลังจากรวบรวมลงในdistไดเร็กทอรี
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
และสุดท้าย เราสามารถเริ่ม Parcel ได้ จากmy-projectโฟลเดอร์ในเทอร์มินัลของคุณ ให้รันสคริปต์ npm ที่เพิ่มใหม่:
```
npm start
```

ในส่วนถัดไปและท้ายสุดของคู่มือนี้ เราจะนำเข้า CSS และ JavaScript ของ Bootstrap ทั้งหมด

นำเข้า Bootstrap

การนำเข้า Bootstrap ไปยัง Parcel จำเป็นต้องมีการนำเข้าสองครั้ง หนึ่งstyles.scssรายการในmain.jsไฟล์ .

นำเข้า CSS ของ Bootstrap เพิ่มสิ่งต่อไปนี้src/scss/styles.scssเพื่อนำเข้า Sass ต้นทางของ Bootstrap ทั้งหมด
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
คุณยังสามารถนำเข้าสไตล์ชีตของเราทีละรายการได้หากต้องการ อ่านเอกสารนำเข้า Sass ของเราสำหรับรายละเอียด
นำเข้า JS ของ Bootstrap เพิ่มสิ่งต่อไปนี้src/js/main.jsเพื่อนำเข้า JS ของ Bootstrap ทั้งหมด Popper จะถูกนำเข้าโดยอัตโนมัติผ่าน Bootstrap
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
คุณยังสามารถนำเข้าปลั๊กอิน JavaScript ทีละรายการได้ตามต้องการเพื่อลดขนาดบันเดิล:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
อ่านเอกสาร JavaScript ของเราสำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้ปลั๊กอินของ Bootstrap
และคุณทำเสร็จแล้ว! 🎉ด้วย Sass และ JS ต้นทางของ Bootstrap ที่โหลดเต็มแล้ว เซิร์ฟเวอร์การพัฒนาในพื้นที่ของคุณควรมีลักษณะดังนี้

ตอนนี้คุณสามารถเริ่มเพิ่มส่วนประกอบ Bootstrap ที่คุณต้องการใช้ อย่าลืมดูโปรเจ็กต์ตัวอย่าง Parcel ฉบับสมบูรณ์เพื่อดูวิธีรวม Sass ที่กำหนดเองเพิ่มเติมและเพิ่มประสิทธิภาพบิลด์ของคุณโดยนำเข้าเฉพาะส่วนของ CSS และ JS ของ Bootstrap ที่คุณต้องการ

เห็นสิ่งผิดปกติหรือล้าสมัยที่นี่? กรุณาเปิดปัญหาบน GitHub ต้องการความช่วยเหลือในการแก้ไขปัญหา? ค้นหาหรือเริ่มการสนทนาบน GitHub