বুটষ্ট্ৰেপ আৰু ভাইট

Vite ব্যৱহাৰ কৰি আপোনাৰ প্ৰকল্পত Bootstrap ৰ CSS আৰু JavaScript কেনেকৈ অন্তৰ্ভুক্ত আৰু বাণ্ডল কৰিব লাগে তাৰ বাবে অফিচিয়েল সহায়ক ।

এই পৃষ্ঠাত

শেষলৈকে এৰিব বিচাৰেনে? এই সহায়কৰ বাবে উৎস ক'ড আৰু কাৰ্য্যকৰী ডেমো ডাউনলোড কৰক 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
```
বুটষ্ট্ৰেপ সংস্থাপন কৰক। এতিয়া আমি Bootstrap ইনষ্টল কৰিব পাৰো। আমি Popperও ইনষ্টল কৰিম কাৰণ আমাৰ ড্ৰপডাউন, popovers, আৰু টুলটিপসমূহ সিহঁতৰ অৱস্থানৰ বাবে ইয়াৰ ওপৰত নিৰ্ভৰ কৰে। যদি আপুনি সেই উপাদানসমূহ ব্যৱহাৰ কৰাৰ পৰিকল্পনা কৰা নাই, তেন্তে আপুনি ইয়াত Popper বাদ দিব পাৰে।
```
npm i --save bootstrap @popperjs/core
```
অতিৰিক্ত নিৰ্ভৰশীলতা সংস্থাপন কৰক। Vite আৰু Bootstrap ৰ উপৰিও, Bootstrap ৰ CSS সঠিকভাৱে আমদানি আৰু বাণ্ডল কৰিবলে আমাক আন এটা নিৰ্ভৰশীলতা (Sass) ৰ প্ৰয়োজন।
```
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.config.jsএতিয়াও পূৰণ কৰা নাই।

Vite বিন্যাস কৰক

নিৰ্ভৰশীলতাসমূহ ইনষ্টল কৰা আৰু আমাৰ প্ৰজেক্ট ফোল্ডাৰ আমাৰ ক'ডিং আৰম্ভ কৰিবলৈ সাজু হোৱাৰ সৈতে, আমি এতিয়া Vite কনফিগাৰ কৰিব পাৰো আৰু আমাৰ প্ৰজেক্ট স্থানীয়ভাৱে চলাব পাৰো।

vite.config.jsআপোনাৰ সম্পাদকত খোলক । যিহেতু ই খালী, আমি ইয়াত কিছুমান বয়লাৰপ্লেট কনফিগ যোগ কৰিব লাগিব যাতে আমি আমাৰ চাৰ্ভাৰ আৰম্ভ কৰিব পাৰো। কনফিগটোৰ এই অংশটোৱে 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>
```
আমি ইয়াত Bootstrap ষ্টাইলিংৰ অলপ অংশ div class="container"আৰু ৰ সৈতে অন্তৰ্ভুক্ত <button>কৰিছো যাতে আমি দেখিম যে Bootstrap ৰ CSS Vite দ্বাৰা কেতিয়া লোড কৰা হয়।
এতিয়া Vite চলাবলৈ আমাক এটা npm স্ক্ৰিপ্টৰ প্ৰয়োজন। তলত দেখুওৱা লিপিটো খোলক package.jsonআৰু যোগ startকৰক (আপোনাৰ হাতত ইতিমধ্যে পৰীক্ষাৰ লিপি থাকিব লাগে)। আমি আমাৰ স্থানীয় Vite dev চাৰ্ভাৰ আৰম্ভ কৰিবলৈ এই লিপি ব্যৱহাৰ কৰিম।
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
আৰু শেষত আমি ভিটে আৰম্ভ কৰিব পাৰো। আপোনাৰ টাৰ্মিনেলৰ ফোল্ডাৰৰ পৰা my-project, সেই নতুনকৈ যোগ কৰা npm লিপি চলাওক:
```
npm start
```

এই সহায়কৰ পৰৱৰ্তী আৰু শেষ অংশত, আমি Bootstrap ৰ সকলো CSS আৰু JavaScript আমদানি কৰিম ।

বুটষ্ট্ৰেপ আমদানি কৰক

Bootstrap ৰ Sass আমদানি ত সংস্থাপন কৰক 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
  }
}
```
এতিয়া, Bootstrap ৰ CSS আমদানি কৰা যাওক। src/scss/styles.scssBootstrap ৰ সকলো উৎস Sass আমদানি কৰিবলে নিম্নলিখিত যোগ কৰক ।
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
আপুনি ইচ্ছা কৰিলে আমাৰ ষ্টাইলশ্বীটসমূহো পৃথকে পৃথকে আমদানি কৰিব পাৰে। বিতংভাৱে জানিবলৈ আমাৰ Sass import docs পঢ়ক ।
ইয়াৰ পিছত আমি CSS লোড কৰি Bootstrap ৰ JavaScript আমদানি কৰোঁ। src/js/main.jsCSS লোড কৰিবলে আৰু Bootstrap ৰ সকলো JS আমদানি কৰিবলে নিম্নলিখিত যোগ কৰক । বুটষ্ট্ৰেপৰ জৰিয়তে পপাৰ স্বয়ংক্ৰিয়ভাৱে আমদানি কৰা হ’ব।
```
// 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 ৰ প্লাগইনসমূহ কেনেকৈ ব্যৱহাৰ কৰিব লাগে তাৰ বিষয়ে অধিক তথ্যৰ বাবে আমাৰ JavaScript নথিপত্ৰসমূহ পঢ়ক ।
আৰু তোমাৰ কাম শেষ হৈ গ’ল! 🎉 Bootstrap ৰ উৎস Sass আৰু JS সম্পূৰ্ণৰূপে লোড হোৱাৰ সৈতে, আপোনাৰ স্থানীয় বিকাশ চাৰ্ভাৰ এতিয়া এনেকুৱা দেখা যাব লাগে।

এতিয়া আপুনি ব্যৱহাৰ কৰিব বিচৰা যিকোনো Bootstrap উপাদান যোগ কৰা আৰম্ভ কৰিব পাৰিব । অতিৰিক্ত স্বনিৰ্বাচিত Sass কেনেকৈ অন্তৰ্ভুক্ত কৰিব লাগে আৰু কেৱল Bootstrap ৰ CSS আৰু JS ৰ অংশসমূহ আমদানি কৰি আপোনাৰ নিৰ্মাণ অনুকূল কৰিব লাগে তাৰ বাবে সম্পূৰ্ণ Vite উদাহৰণ প্ৰকল্প নিশ্চিতভাৱে পৰীক্ষা কৰক যি আপুনি প্ৰয়োজনীয় ।

ইয়াত কিবা ভুল বা পুৰণি দেখিছেনে? অনুগ্ৰহ কৰি GitHub ত এটা সমস্যা খোলক । সমস্যা সমাধানত সহায়ৰ প্ৰয়োজন? GitHub ত সন্ধান কৰক বা এটা আলোচনা আৰম্ভ কৰক ।