বুটস্ট্র্যাপ এবং Vite

Vite ব্যবহার করে আপনার প্রোজেক্টে বুটস্ট্র্যাপের সিএসএস এবং জাভাস্ক্রিপ্ট কীভাবে অন্তর্ভুক্ত এবং বান্ডেল করবেন তার জন্য অফিসিয়াল গাইড।

এই পৃষ্ঠায়

শেষ এড়িয়ে যেতে চান? twbs/examples repository থেকে এই গাইডের জন্য সোর্স কোড এবং কাজের ডেমো ডাউনলোড করুন । আপনি লাইভ সম্পাদনার জন্য স্ট্যাকব্লিটজে উদাহরণটিও খুলতে পারেন।

সেটআপ

আমরা স্ক্র্যাচ থেকে বুটস্ট্র্যাপ সহ একটি Vite প্রকল্প তৈরি করছি, তাই আমরা সত্যিই শুরু করার আগে কিছু পূর্বশর্ত এবং সামনের ধাপ রয়েছে। এই নির্দেশিকাটির জন্য আপনাকে Node.js ইনস্টল করা এবং টার্মিনালের সাথে কিছু পরিচিতি থাকতে হবে।

একটি প্রকল্প ফোল্ডার তৈরি করুন এবং এনপিএম সেটআপ করুন। আমরা my-projectফোল্ডারটি তৈরি করব এবং আর্গুমেন্ট সহ npm শুরু করব -yযাতে এটি আমাদের সমস্ত ইন্টারেক্টিভ প্রশ্ন জিজ্ঞাসা না করে।
```
mkdir my-project && cd my-project
npm init -y
```
Vite ইনস্টল করুন। আমাদের ওয়েবপ্যাক গাইডের বিপরীতে, এখানে শুধুমাত্র একটি বিল্ড টুল নির্ভরতা রয়েছে। আমরা --save-devইঙ্গিত দিতে ব্যবহার করি যে এই নির্ভরতা শুধুমাত্র উন্নয়ন ব্যবহারের জন্য এবং উৎপাদনের জন্য নয়।
```
npm i --save-dev vite
```
বুটস্ট্র্যাপ ইনস্টল করুন। এখন আমরা বুটস্ট্র্যাপ ইনস্টল করতে পারি। আমরা পপারও ইনস্টল করব যেহেতু আমাদের ড্রপডাউন, পপোভার এবং টুলটিপগুলি তাদের অবস্থানের জন্য এটির উপর নির্ভর করে। আপনি যদি সেই উপাদানগুলি ব্যবহার করার পরিকল্পনা না করেন তবে আপনি এখানে পপারকে বাদ দিতে পারেন।
```
npm i --save bootstrap @popperjs/core
```
অতিরিক্ত নির্ভরতা ইনস্টল করুন। Vite এবং Bootstrap ছাড়াও, বুটস্ট্র্যাপের CSS সঠিকভাবে আমদানি এবং বান্ডেল করার জন্য আমাদের আরেকটি নির্ভরতা (Sass) প্রয়োজন।
```
npm i --save-dev sass
```

এখন যেহেতু আমাদের কাছে সমস্ত প্রয়োজনীয় নির্ভরতা ইনস্টল এবং সেটআপ রয়েছে, আমরা প্রকল্প ফাইল তৈরি এবং বুটস্ট্র্যাপ আমদানির কাজ করতে পারি।

প্রকল্প কাঠামো

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

এখন আপনি ব্যবহার করতে চান এমন কোনো বুটস্ট্র্যাপ উপাদান যোগ করা শুরু করতে পারেন। কীভাবে অতিরিক্ত কাস্টম Sass অন্তর্ভুক্ত করবেন এবং বুটস্ট্র্যাপের CSS এবং JS-এর আপনার প্রয়োজনীয় অংশগুলি আমদানি করে কীভাবে আপনার বিল্ডকে অপ্টিমাইজ করবেন তার সম্পূর্ণ Vite উদাহরণ প্রকল্পটি পরীক্ষা করে দেখুন ৷

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