বুটস্ট্র্যাপ এবং পার্সেল

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

এই পৃষ্ঠায়

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

সেটআপ

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

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

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

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

আমরা ইতিমধ্যে my-projectফোল্ডার তৈরি করেছি এবং এনপিএম শুরু করেছি। এখন আমরা আমাদের 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আমাদের CSS এবং JavaScript ফাইল সহ কিছু মৌলিক HTML সেট আপ করতে আমাদের পৃষ্ঠা ব্যবহার করি।
```
<!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>যাতে আমরা দেখতে পাই কখন বুটস্ট্র্যাপের সিএসএস ওয়েবপ্যাক দ্বারা লোড হয়।

পার্সেল স্বয়ংক্রিয়ভাবে সনাক্ত করবে যে আমরা Sass ব্যবহার করছি এবং এটি সমর্থন করার জন্য Sass পার্সেল প্লাগইন ইনস্টল করুন। তবে, আপনি যদি চান, আপনি নিজেও চালাতে পারেন npm i --save-dev @parcel/transformer-sass।
পার্সেল npm স্ক্রিপ্ট যোগ করুন. খুলুন এবং অবজেক্টে package.jsonনিম্নলিখিত startস্ক্রিপ্ট যোগ করুন। আমরা আমাদের পার্সেল ডেভেলপমেন্ট সার্ভার শুরু করতে এই স্ক্রিপ্টটি ব্যবহার করব এবং ডিরেক্টরিতে scriptsসংকলিত হওয়ার পরে আমরা যে HTML ফাইলটি তৈরি করেছি তা রেন্ডার করব ।dist
```
{
   // ...
   "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
```

এই গাইডের পরবর্তী এবং চূড়ান্ত বিভাগে, আমরা বুটস্ট্র্যাপের সমস্ত CSS এবং জাভাস্ক্রিপ্ট আমদানি করব।

বুটস্ট্র্যাপ আমদানি করুন

পার্সেলে বুটস্ট্র্যাপ আমদানি করতে দুটি আমদানি প্রয়োজন, একটি আমাদের মধ্যে styles.scssএবং একটি আমাদের মধ্যে main.js।

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

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

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