বুটষ্ট্ৰেপ আৰু পাৰ্চেল

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

এই পৃষ্ঠাত

শেষলৈকে এৰিব বিচাৰেনে? এই সহায়কৰ বাবে উৎস ক'ড আৰু কাৰ্য্যকৰী ডেমো ডাউনলোড কৰক twbs/examples ভঁৰালৰ পৰা । আপুনি উদাহৰণটো StackBlitz তও খোলিব পাৰে কিন্তু ইয়াক চলাব নোৱাৰে কাৰণ Parcel বৰ্তমানে তাত সমৰ্থিত নহয়।

স্থাপন কৰা

আমি বুটষ্ট্ৰেপৰ সৈতে এটা পাৰ্চেল প্ৰকল্প শূন্যৰ পৰা নিৰ্মাণ কৰি আছো, গতিকে আমি সঁচাকৈয়ে আৰম্ভ কৰাৰ আগতে কিছুমান পূৰ্বচৰ্ত আৰু আগৰ পদক্ষেপ আছে। এই সহায়কৰ বাবে আপুনি Node.js সংস্থাপন কৰা আৰু টাৰ্মিনেলৰ সৈতে কিছু পৰিচিতিৰ প্ৰয়োজন ।

এটা প্ৰজেক্ট ফোল্ডাৰ সৃষ্টি কৰক আৰু npm ছেটআপ কৰক। আমি my-projectফোল্ডাৰটো সৃষ্টি কৰিম আৰু যুক্তিটোৰ সৈতে npm আৰম্ভ কৰিম -yযাতে ই আমাক সকলো ইন্টাৰেক্টিভ প্ৰশ্ন সুধিব নোৱাৰে।
```
mkdir my-project && cd my-project
npm init -y
```
পাৰ্চেল ইনষ্টল কৰক। আমাৰ Webpack গাইডৰ দৰে নহয়, ইয়াত কেৱল এটা নিৰ্মাণ সঁজুলি নিৰ্ভৰশীলতা আছে। পাৰ্চেলে স্বয়ংক্ৰিয়ভাৱে ভাষা ট্ৰেন্সফৰ্মাৰ (যেনে Sass) সংস্থাপন কৰিব যেতিয়া ই সেইবোৰ ধৰা পেলায়। আমি --save-devসংকেত দিবলৈ ব্যৱহাৰ কৰো যে এই নিৰ্ভৰশীলতা কেৱল উন্নয়নৰ ব্যৱহাৰৰ বাবেহে আৰু উৎপাদনৰ বাবে নহয়।
```
npm i --save-dev parcel
```
বুটষ্ট্ৰেপ সংস্থাপন কৰক। এতিয়া আমি Bootstrap ইনষ্টল কৰিব পাৰো। আমি Popperও ইনষ্টল কৰিম কাৰণ আমাৰ ড্ৰপডাউন, popovers, আৰু টুলটিপসমূহ সিহঁতৰ অৱস্থানৰ বাবে ইয়াৰ ওপৰত নিৰ্ভৰ কৰে। যদি আপুনি সেই উপাদানসমূহ ব্যৱহাৰ কৰাৰ পৰিকল্পনা কৰা নাই, তেন্তে আপুনি ইয়াত Popper বাদ দিব পাৰে।
```
npm i --save bootstrap @popperjs/core
```

এতিয়া যেতিয়া আমাৰ সকলো প্ৰয়োজনীয় নিৰ্ভৰশীলতা ইনষ্টল কৰা হৈছে, আমি প্ৰজেক্ট ফাইলসমূহ সৃষ্টি কৰা আৰু বুটষ্ট্ৰেপ আমদানি কৰা কামত নামিব পাৰো।

প্ৰকল্পৰ গাঁথনি

আমি ইতিমধ্যে 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

এইখিনিতে সকলো সঠিক ঠাইত আছে, কিন্তু আমাৰ চাৰ্ভাৰ আৰম্ভ কৰিবলৈ পাৰ্চেলক এটা HTML পেজ আৰু npm স্ক্ৰিপ্টৰ প্ৰয়োজন।

পাৰ্চেল বিন্যাস কৰক

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

src/index.htmlফাইলটো পূৰণ কৰক। পাৰ্চেলক ৰেণ্ডাৰ কৰিবলৈ এটা পৃষ্ঠাৰ প্ৰয়োজন, গতিকে আমি আমাৰ index.htmlপৃষ্ঠা ব্যৱহাৰ কৰি কিছুমান মৌলিক HTML ছেট আপ কৰোঁ, আমাৰ CSS আৰু JavaScript ফাইলসমূহকে ধৰি।
```
<!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 দ্বাৰা কেতিয়া লোড কৰা হয়।

পাৰ্চেলে স্বয়ংক্ৰিয়ভাৱে ধৰা পেলাব যে আমি Sass ব্যৱহাৰ কৰিছো আৰু ইয়াক সমৰ্থন কৰিবলৈ Sass পাৰ্চেল প্লাগইন ইনষ্টল কৰিব। কিন্তু, যদি আপুনি বিচাৰে, আপুনি হস্তচালিতভাৱেও চলাব পাৰে npm i --save-dev @parcel/transformer-sass।
পাৰ্চেল npm লিপিসমূহ যোগ কৰক। খোলক আৰু বস্তুটোত package.jsonনিম্নলিখিত startলিপি যোগ কৰক। scriptsআমি এই স্ক্ৰিপ্ট ব্যৱহাৰ কৰি আমাৰ পাৰ্চেল ডেভেলপমেন্ট চাৰ্ভাৰ আৰম্ভ কৰিম আৰু distডাইৰেকটৰীত কম্পাইল কৰাৰ পিছত আমি সৃষ্টি কৰা HTML ফাইলটো ৰেণ্ডাৰ কৰিম।
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
আৰু শেষত আমি পাৰ্চেল আৰম্ভ কৰিব পাৰো। আপোনাৰ টাৰ্মিনেলৰ ফোল্ডাৰৰ পৰা my-project, সেই নতুনকৈ যোগ কৰা npm লিপি চলাওক:
```
npm start
```

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

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

পাৰ্চেললৈ বুটষ্ট্ৰেপ আমদানি কৰিবলৈ দুটা আমদানিৰ প্ৰয়োজন হয়, এটা আমাৰ styles.scssআৰু এটা আমাৰ ত main.js।

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

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