بوت استرپ و بسته

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

اکنون که تمام وابستگی‌های لازم را نصب کرده‌ایم، می‌توانیم کار ایجاد فایل‌های پروژه و وارد کردن 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

وقتی کارتان تمام شد، پروژه کامل شما باید به شکل زیر باشد:

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کنید. بسته برای رندر کردن به یک صفحه نیاز دارد، بنابراین ما از index.htmlصفحه خود برای تنظیم برخی از HTML اولیه، از جمله فایل های CSS و جاوا اسکریپت خود استفاده می کنیم.
```
<!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>
```
ما در اینجا کمی از استایل بوت استرپ را با div class="container"و <button>به این ترتیب اضافه می کنیم تا ببینیم چه زمانی CSS بوت استرپ توسط Webpack بارگذاری می شود.

Parcel به طور خودکار تشخیص می دهد که ما از Sass استفاده می کنیم و افزونه Sass Parcel را برای پشتیبانی از آن نصب می کند. با این حال، در صورت تمایل، می توانید به صورت دستی نیز اجرا کنید npm i --save-dev @parcel/transformer-sass.
اسکریپت های Parcel npm را اضافه کنید. را باز کنید و اسکریپت package.jsonزیر را به شی اضافه کنید. ما از این اسکریپت برای راه اندازی سرور توسعه Parcel خود استفاده می کنیم و فایل HTML ایجاد شده را پس از کامپایل شدن در دایرکتوری رندر می کنیم.startscriptsdist
```
{
   // ...
   "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 و جاوا اسکریپت بوت استرپ را وارد می کنیم.

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

وارد کردن Bootstrap به Parcel نیاز به دو واردات دارد، یکی به ما styles.scssو دیگری به ما main.js.

CSS بوت استرپ را وارد کنید. موارد زیر را به اضافه کنید src/scss/styles.scssتا تمام Sass منبع Bootstrap را وارد کنید.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
همچنین در صورت تمایل می توانید شیوه نامه های ما را به صورت جداگانه وارد کنید. برای جزئیات، اسناد واردات Sass ما را بخوانید .
JS بوت استرپ را وارد کنید. src/js/main.jsبرای وارد کردن تمام JS های Bootstrap، موارد زیر را به آن اضافه کنید . Popper به طور خودکار از طریق Bootstrap وارد می شود.
```
// 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، سرور توسعه محلی شما اکنون باید به این شکل باشد.

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

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