Bootstrap & Vite

راهنمای رسمی نحوه گنجاندن و بسته‌بندی CSS و جاوا اسکریپت Bootstrap در پروژه خود با استفاده از Vite.

در این صفحه

آیا می خواهید به پایان بروید؟ کد منبع و نسخه آزمایشی این راهنما را از مخزن twbs/examples دانلود کنید . همچنین می توانید مثال را در StackBlitz برای ویرایش زنده باز کنید.

برپایی

ما در حال ساخت یک پروژه Vite با بوت استرپ از ابتدا هستیم، بنابراین پیش نیازها و مراحل اولیه قبل از شروع واقعی وجود دارد. این راهنما به شما نیاز دارد که 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
```
بوت استرپ را نصب کنید. اکنون می توانیم بوت استرپ را نصب کنیم. ما همچنین Popper را نصب خواهیم کرد زیرا بازشوها، پاپ‌اورها و راهنمای ابزار ما برای موقعیت‌یابی به آن بستگی دارد. اگر قصد استفاده از آن مؤلفه‌ها را ندارید، می‌توانید Popper را در اینجا حذف کنید.
```
npm i --save bootstrap @popperjs/core
```
وابستگی اضافی را نصب کنید. علاوه بر Vite و Bootstrap، به یک وابستگی دیگر (Sass) برای وارد کردن و بسته‌بندی صحیح CSS Bootstrap نیاز داریم.
```
npm i --save-dev sass
```

اکنون که همه وابستگی‌های لازم را نصب و راه‌اندازی کرده‌ایم، می‌توانیم کار ایجاد فایل‌های پروژه و وارد کردن Bootstrap را آغاز کنیم.

ساختار پروژه

ما قبلاً my-projectپوشه را ایجاد کرده ایم و npm را مقداردهی اولیه کرده ایم. اکنون ما همچنین srcپوشه، شیوه نامه و فایل جاوا اسکریپت خود را ایجاد می کنیم تا ساختار پروژه را کامل کنیم. موارد زیر را اجرا کنید 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در ویرایشگر خود باز کنید. از آنجایی که خالی است، باید مقداری پیکربندی boilerplate را به آن اضافه کنیم تا بتوانیم سرور خود را راه اندازی کنیم. این بخش از پیکربندی به Vite می‌گوید که باید به دنبال جاوا اسکریپت پروژه ما و نحوه رفتار سرور توسعه باشد ( 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>

ما در اینجا کمی از استایل بوت استرپ را با div class="container"و <button>برای اینکه ببینیم چه زمانی CSS بوت استرپ توسط Vite بارگذاری می شود، اضافه می کنیم.

اکنون برای اجرای Vite به یک اسکریپت npm نیاز داریم. اسکریپت زیر را باز package.jsonکرده و اضافه startکنید (از قبل باید اسکریپت تست را داشته باشید). ما از این اسکریپت برای راه اندازی سرور محلی Vite dev استفاده می کنیم.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
و در نهایت، ما می توانیم Vite را شروع کنیم. از my-projectپوشه موجود در ترمینال خود، اسکریپت npm جدید اضافه شده را اجرا کنید:
```
npm start
```

در بخش بعدی و آخر این راهنما، تمام CSS و جاوا اسکریپت بوت استرپ را وارد می کنیم.

وارد کردن بوت استرپ

وارد کردن 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 را بارگذاری کرده و جاوا اسکریپت 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'
```
همچنین می‌توانید در صورت نیاز، افزونه‌های جاوا اسکریپت را به صورت جداگانه وارد کنید تا اندازه بسته‌ها کاهش یابد:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
برای اطلاعات بیشتر در مورد نحوه استفاده از افزونه های بوت استرپ، اسناد جاوا اسکریپت ما را بخوانید .
و شما تمام شده اید! 🎉 با بارگیری کامل منبع Bootstrap Sass و JS، سرور توسعه محلی شما اکنون باید به این شکل باشد.

اکنون می توانید شروع به اضافه کردن هر مؤلفه بوت استرپ کنید که می خواهید استفاده کنید. حتماً پروژه مثال کامل Vite را بررسی کنید تا نحوه اضافه کردن Sass سفارشی اضافی و بهینه سازی ساخت خود را فقط با وارد کردن بخش هایی از CSS و JS Bootstrap که نیاز دارید، بررسی کنید.

مشکلی در اینجا می بینید یا قدیمی است؟ لطفاً یک مشکل را در GitHub باز کنید. برای عیب یابی به کمک نیاز دارید؟ جستجو یا شروع یک بحث در GitHub.