Bootstrap & Vite

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

ในหน้านี้

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

ติดตั้ง

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

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

ตอนนี้เราได้ติดตั้งและตั้งค่าการพึ่งพาที่จำเป็นทั้งหมดแล้ว เราจึงเริ่มสร้างไฟล์โครงการและนำเข้า 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 vite.config.js

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

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

ณ จุดนี้ทุกอย่างมาถูกที่แล้ว แต่ Vite จะไม่ทำงานเพราะเรายังไม่ได้กรอกข้อมูลของvite.config.jsเรา

กำหนดค่า Vite

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

เปิดvite.config.jsในโปรแกรมแก้ไขของคุณ เนื่องจากว่างเปล่า เราจึงต้องเพิ่มการกำหนดค่าสำเร็จรูปเพื่อให้เราสามารถเริ่มต้นเซิร์ฟเวอร์ของเราได้ ส่วนกำหนดค่าส่วนนี้บอกให้ Vite มองหา JavaScript ของโปรเจ็กต์ของเรา และวิธีการทำงานของเซิร์ฟเวอร์การพัฒนา (ดึงจากsrcโฟลเดอร์ที่มีการโหลดซ้ำแบบด่วน)
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```
src/index.htmlต่อ ไปเราจะกรอก นี่คือหน้า HTML ที่ Vite จะโหลดในเบราว์เซอร์เพื่อใช้ CSS และ JS ที่รวมเข้าด้วยกันที่เราจะเพิ่มลงในขั้นตอนต่อไป
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>
```
เราได้รวมสไตล์ Bootstrap ไว้ด้วยdiv class="container"และ<button>เพื่อที่เราจะได้เห็นว่า Vite โหลด CSS ของ Bootstrap เมื่อใด
ตอนนี้เราต้องการสคริปต์ npm เพื่อเรียกใช้ Vite เปิดpackage.jsonและเพิ่มstartสคริปต์ที่แสดงด้านล่าง (คุณควรมีสคริปต์ทดสอบแล้ว) เราจะใช้สคริปต์นี้เพื่อเริ่มเซิร์ฟเวอร์ Vite dev ในพื้นที่ของเรา
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
และสุดท้าย เราก็เริ่ม Vite ได้ จากmy-projectโฟลเดอร์ในเทอร์มินัลของคุณ ให้รันสคริปต์ npm ที่เพิ่มใหม่:
```
npm start
```

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

นำเข้า Bootstrap

ตั้งค่าการนำเข้า Sass ของ Bootstrap ในvite.config.js. ไฟล์การกำหนดค่าของคุณเสร็จสมบูรณ์แล้ว และควรตรงกับข้อมูลโค้ดด้านล่าง ส่วนใหม่เพียงส่วนเดียวที่นี่คือresolveส่วน—เราใช้ส่วนนี้เพื่อเพิ่มนามแฝงให้กับไฟล์ต้นทางของเราภายในnode_modulesเพื่อให้การนำเข้าทำได้ง่ายที่สุด
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
ตอนนี้ มานำเข้า CSS ของ Bootstrap กัน เพิ่มสิ่งต่อไปนี้src/scss/styles.scssเพื่อนำเข้า Sass ต้นทางของ Bootstrap ทั้งหมด
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
คุณยังสามารถนำเข้าสไตล์ชีตของเราทีละรายการได้หากต้องการ อ่านเอกสารนำเข้า Sass ของเราสำหรับรายละเอียด
ต่อไปเราจะโหลด CSS และนำเข้า JavaScript ของ Bootstrap เพิ่มสิ่งต่อไปนี้src/js/main.jsเพื่อโหลด CSS และนำเข้า JS ของ Bootstrap ทั้งหมด Popper จะถูกนำเข้าโดยอัตโนมัติผ่าน Bootstrap
```
// Import our custom CSS
import '../scss/styles.scss'

// 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 ที่คุณต้องการใช้ อย่าลืมดูโปรเจ็กต์ตัวอย่าง Vite ฉบับสมบูรณ์เพื่อดูวิธีรวม Sass ที่กำหนดเองเพิ่มเติมและเพิ่มประสิทธิภาพบิลด์ของคุณโดยนำเข้าเฉพาะส่วนของ CSS และ JS ของ Bootstrap ที่คุณต้องการ

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