बूटस्ट्रैप एवं पार्सल

Parcel इत्यस्य उपयोगेन Bootstrap इत्यस्य CSS तथा JavaScript इत्येतत् कथं स्वप्रकल्पे समाविष्टं कृत्वा बण्डल् करणीयम् इति आधिकारिकमार्गदर्शिका ।

इस पृष्ठ पर

अन्त्यपर्यन्तं लङ्घयितुम् इच्छति वा ? अस्य मार्गदर्शिकायाः स्रोतसङ्केतं कार्यप्रदर्शनं च twbs/examples भण्डारतः डाउनलोड् कुर्वन्तु । भवान् StackBlitz इत्यत्र अपि उदाहरणं उद्घाटयितुं शक्नोति परन्तु तत् न चालयितुं शक्नोति यतोहि Parcel सम्प्रति तत्र समर्थितं नास्ति ।

स्थापयति

वयं Bootstrap इत्यनेन सह एकं Parcel परियोजनां शुद्धतः निर्मामः, अतः वयं वास्तवतः आरम्भं कर्तुं शक्नुमः तस्मात् पूर्वं केचन पूर्वापेक्षाः अपि च अग्रे पदानि सन्ति। अस्मिन् मार्गदर्शके भवद्भिः 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
```
बूटस्ट्रैप् संस्थापयन्तु। अधुना वयं Bootstrap इत्येतत् संस्थापयितुं शक्नुमः । वयं Popper अपि संस्थापयिष्यामः यतः अस्माकं dropdowns, popovers, tooltips च तेषां स्थितिकरणार्थं तस्मिन् निर्भरं भवति । यदि भवान् तान् घटकान् उपयोक्तुं योजनां न करोति तर्हि अत्र 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 विन्यस्तुं स्वप्रकल्पं स्थानीयतया चालयितुं शक्नुमः । Parcel इत्यस्य कृते एव डिजाइनद्वारा कोऽपि विन्याससञ्चिकायाः आवश्यकता नास्ति, परन्तु अस्माकं सर्वरस्य आरम्भार्थं npm स्क्रिप्ट् HTML सञ्चिकायाः च आवश्यकता वर्तते ।

src/index.htmlसञ्चिकां पूरयन्तु । Parcel इत्यस्य रेण्डर् कर्तुं पृष्ठस्य आवश्यकता अस्ति, अतः वयं अस्माकं 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>
```
वयम् अत्र Bootstrap styling इत्यस्य किञ्चित् भागं च समाविष्टं कुर्मः div class="container"तथा च <button>येन वयं पश्यामः यत् Bootstrap इत्यस्य CSS Webpack द्वारा कदा लोड् भवति।

Parcel स्वयमेव ज्ञास्यति यत् वयं Sass इत्यस्य उपयोगं कुर्मः तथा च तस्य समर्थनार्थं Sass Parcel प्लगिन् संस्थापयिष्यति। तथापि, यदि भवान् इच्छति तर्हि भवान् मैन्युअल् रूपेण अपि चालयितुं शक्नोति npm i --save-dev @parcel/transformer-sass।
Parcel npm स्क्रिप्ट् योजयन्तु । the उद्घाट्य package.jsonनिम्नलिखित startस्क्रिप्ट् scriptsऑब्जेक्ट् मध्ये योजयन्तु । वयं अस्माकं Parcel विकाससर्वरं आरभ्य वयं निर्मितां HTML सञ्चिकां distनिर्देशिकायां संकलितस्य अनन्तरं रेण्डर् कर्तुं एतां स्क्रिप्ट् उपयुञ्ज्महे ।
```
{
   // ...
   "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
```

अस्य मार्गदर्शिकायाः अग्रिमे अन्तिमे च विभागे वयं Bootstrap इत्यस्य सर्वाणि CSS तथा JavaScript इत्यस्य आयातं करिष्यामः ।

बूटस्ट्रैप आयात करें

Bootstrap इत्येतत् Parcel मध्ये आयातयितुं द्वौ आयातौ आवश्यकौ, एकः अस्माकं styles.scssमध्ये एकः अस्माकं main.js.

Bootstrap इत्यस्य CSS आयातयन्तु। src/scss/styles.scssBootstrap इत्यस्य सर्वान् स्रोतः Sass आयातयितुं निम्नलिखितम् to योजयन्तु ।
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
भवान् इच्छति चेत् अस्माकं शैलीपत्रिकाः व्यक्तिगतरूपेण अपि आयातयितुं शक्नोति । विस्तरेण ज्ञातुं अस्माकं Sass import docs पठन्तु ।
Bootstrap का JS आयात करें। src/js/main.jsBootstrap इत्यस्य सर्वाणि JS आयातयितुं निम्नलिखितम् to योजयन्तु । Bootstrap इत्यस्य माध्यमेन स्वयमेव Popper इत्यस्य आयातः भविष्यति ।
```
// 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 docs पठन्तु ।
त्वं च कृतः ! 🎉 Bootstrap इत्यस्य स्रोतः Sass तथा JS पूर्णतया लोड् कृत्वा अधुना भवतः स्थानीयविकाससर्वरः एतादृशः भवेत्।

इदानीं भवान् यत्किमपि Bootstrap घटकं योजयितुं आरभुं शक्नोति यत् भवान् उपयोक्तुं इच्छति । अतिरिक्त कस्टम Sass कथं समाविष्टं कर्तव्यं तथा च केवलं Bootstrap इत्यस्य CSS तथा JS इत्यस्य भागान् आयात्य स्वस्य निर्माणं अनुकूलितं कर्तुं यत् भवतः आवश्यकता अस्ति तस्य कृते सम्पूर्णं Parcel उदाहरण परियोजना अवश्यं पश्यन्तु ।

अत्र किमपि दोषं वा पुरातनं वा पश्यतु? कृपया GitHub इत्यत्र एकं मुद्दा उद्घाटयन्तु . समस्यानिवारणार्थं सहायता आवश्यकी अस्ति वा? GitHub इत्यत्र अन्वेषणं कुर्वन्तु अथवा चर्चां आरभत ।