बुटस्ट्र्याप र पार्सल

पार्सल प्रयोग गरेर तपाइँको परियोजनामा बुटस्ट्र्यापको CSS र JavaScript कसरी समावेश गर्ने र बन्डल गर्ने आधिकारिक गाइड।

यस पृष्ठमा

अन्त्यमा छोड्न चाहनुहुन्छ? twbs/examples repository बाट यस गाइडको लागि स्रोत कोड र काम गर्ने डेमो डाउनलोड गर्नुहोस् । तपाईंले StackBlitz मा उदाहरण पनि खोल्न सक्नुहुन्छ तर यसलाई चलाउनुहुन्न किनभने पार्सल हाल त्यहाँ समर्थित छैन।

सेटअप

हामी स्क्र्याचबाट बुटस्ट्र्यापको साथ पार्सल परियोजना निर्माण गर्दैछौं, त्यसैले हामीले वास्तवमै सुरू गर्न सक्नु अघि त्यहाँ केही पूर्व शर्तहरू र अगाडिका चरणहरू छन्। यो गाइडले तपाईंलाई Node.js स्थापना गरेको र टर्मिनलसँग केही परिचित हुन आवश्यक छ।

परियोजना फोल्डर र सेटअप npm सिर्जना गर्नुहोस्। हामी my-projectफोल्डर सिर्जना गर्नेछौं र तर्कको साथ npm प्रारम्भ गर्नेछौं जसले -yहामीलाई सबै अन्तरक्रियात्मक प्रश्नहरू सोध्नबाट बच्न।
```
mkdir my-project && cd my-project
npm init -y
```
पार्सल स्थापना गर्नुहोस्। हाम्रो वेबप्याक गाइडको विपरीत, यहाँ एक मात्र निर्माण उपकरण निर्भरता छ। पार्सलले स्वचालित रूपमा भाषा ट्रान्सफर्मरहरू (जस्तै Sass) स्थापना गर्नेछ किनकि यसले तिनीहरूलाई पत्ता लगाउँछ। --save-devयो निर्भरता केवल विकास प्रयोगको लागि हो, उत्पादनको लागि होइन भनेर हामी संकेत गर्छौं।
```
npm i --save-dev parcel
```
बुटस्ट्र्याप स्थापना गर्नुहोस्। अब हामी Bootstrap स्थापना गर्न सक्छौं। हामी पनि Popper स्थापना गर्नेछौं किनभने हाम्रा ड्रपडाउनहरू, पपओभरहरू, र टूलटिपहरू तिनीहरूको स्थितिको लागि यसमा निर्भर हुन्छन्। यदि तपाइँ ती कम्पोनेन्टहरू प्रयोग गर्ने योजना बनाउनुहुन्न भने, तपाइँ यहाँ Popper लाई हटाउन सक्नुहुन्छ।
```
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 स्क्रिप्ट चाहिन्छ।

पार्सल कन्फिगर गर्नुहोस्

निर्भरताहरू स्थापना भएको र कोडिङ सुरु गर्नको लागि हाम्रो प्रोजेक्ट फोल्डर तयार छ, हामी अब पार्सल कन्फिगर गर्न र स्थानीय रूपमा हाम्रो परियोजना चलाउन सक्छौं। पार्सललाई डिजाइनद्वारा कुनै कन्फिगरेसन फाइल चाहिँदैन, तर हामीलाई हाम्रो सर्भर सुरु गर्नको लागि एनपीएम स्क्रिप्ट र 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>ताकि हामी वेबप्याकद्वारा बुटस्ट्र्यापको CSS लोड भएको देख्छौं।

पार्सलले स्वचालित रूपमा हामीले Sass प्रयोग गरिरहेको पत्ता लगाउनेछ र यसलाई समर्थन गर्न Sass पार्सल प्लगइन स्थापना गर्नेछ। यद्यपि, यदि तपाइँ चाहनुहुन्छ भने, तपाइँ म्यानुअल रूपमा पनि चलाउन सक्नुहुन्छ npm i --save-dev @parcel/transformer-sass।
पार्सल एनपीएम स्क्रिप्टहरू थप्नुहोस्। खोल्नुहोस् र वस्तुमा 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 start
```

यस गाइडको अर्को र अन्तिम खण्डमा, हामी सबै बुटस्ट्र्यापको CSS र JavaScript आयात गर्नेछौं।

बुटस्ट्र्याप आयात गर्नुहोस्

पार्सलमा बुटस्ट्र्याप आयात गर्न दुई आयातहरू आवश्यक पर्दछ, एउटा हाम्रोमा styles.scssर अर्को हाम्रोमा main.js।

बुटस्ट्र्यापको CSS आयात गर्नुहोस्। src/scss/styles.scssसबै बुटस्ट्र्यापको स्रोत सास आयात गर्न निम्न थप्नुहोस् ।
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
यदि तपाइँ चाहनुहुन्छ भने तपाइँ हाम्रो स्टाइलसिटहरू व्यक्तिगत रूपमा आयात गर्न सक्नुहुन्छ। विवरणहरूको लागि हाम्रो Sass आयात कागजातहरू पढ्नुहोस् ।
बुटस्ट्र्यापको JS आयात गर्नुहोस्। src/js/main.jsसबै बुटस्ट्र्यापको JS आयात गर्न निम्न थप्नुहोस् । Popper बुटस्ट्र्याप मार्फत स्वचालित रूपमा आयात गरिनेछ।
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
बन्डल आकारहरू तल राख्नको लागि तपाईले व्यक्तिगत रूपमा JavaScript प्लगइनहरू आयात गर्न सक्नुहुन्छ:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Bootstrap को प्लगइनहरू कसरी प्रयोग गर्ने भन्ने बारे थप जानकारीको लागि हाम्रो JavaScript कागजातहरू पढ्नुहोस् ।
र तपाईंले सक्नुभयो! 🎉 बुटस्ट्र्यापको स्रोत Sass र JS पूर्ण रूपमा लोड भएकोले, तपाईंको स्थानीय विकास सर्भर अब यस्तो देखिनु पर्छ।

अब तपाईले प्रयोग गर्न चाहनु भएको कुनै पनि बुटस्ट्र्याप कम्पोनेन्टहरू थप्न सुरु गर्न सक्नुहुन्छ। थप अनुकूलन सास कसरी समावेश गर्ने र बुटस्ट्र्यापको CSS र JS को भागहरू मात्र आयात गरेर आफ्नो निर्माणलाई अप्टिमाइज गर्ने बारे पूर्ण पार्सल उदाहरण परियोजना जाँच गर्न निश्चित हुनुहोस् ।

यहाँ केहि गलत वा पुरानो देख्नुहुन्छ? कृपया GitHub मा एउटा मुद्दा खोल्नुहोस् । समस्या निवारण मद्दत चाहिन्छ? खोज्नुहोस् वा GitHub मा छलफल सुरु गर्नुहोस्।