बूटस्ट्रैप एंड पार्सल
पार्सल दा इस्तेमाल करदे होई अपने प्रोजेक्ट च बूटस्ट्रैप दे सीएसएस ते जावास्क्रिप्ट गी किस चाल्ली शामल करना ते बंडल करना ऐ इसदे आस्तै आधिकारिक गाइड.
सेट अप
अस नमें सिरेआ बूटस्ट्रैप कन्नै इक पार्सल प्रोजेक्ट बना करदे आं, तां जे अस सचमुच शुरू करी सकने थमां पैह्ले किश पूर्व शर्तें ते अग्गें दे कदम न। इस गाइड च तुसेंगी Node.js इंस्टॉल करना ते टर्मिनल कन्नै किश परिचित होना लोड़चदा ऐ.
-
इक प्रोजेक्ट फोल्डर बनाओ ते एनपीएम सेटअप करो।
my-projectअस फोल्डर बनागे ते npm गी-yआर्गुमेंट कन्नै इनिशियलाइज करगे तां जे एह् असेंगी सारे इंटरएक्टिव सवाल पुच्छने थमां बचाई सकै।mkdir my-project && cd my-project npm init -y -
पार्सल स्थापित करो। साढ़े वेबपैक गाइड दे विपरीत, इत्थै सिर्फ इक गै बिल्ड टूल निर्भरता ऐ। पार्सल अपने आप गै भाशा ट्रांसफार्मर (सैस जनेह्) गी स्थापत करग जि’यां ओह् उंदा पता लांदा ऐ। अस
--save-devइस गल्लै दा संकेत देने दा इस्तेमाल करदे आं जे एह् निर्भरता सिर्फ विकास दे इस्तेमाल आस्तै ऐ ते उत्पादन आस्तै नेईं।npm i --save-dev parcel -
बूटस्ट्रैप इंस्टॉल करो। हुण अस बूटस्ट्रैप इंस्टॉल करी सकने आं। अस 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
इस बिंदु पर, सब किश सही जगह पर ऐ, पर पार्सल गी साढ़े सर्वर गी शुरू करने आस्तै इक एचटीएमएल पेज ते एनपीएम स्क्रिप्ट दी लोड़ ऐ।
पार्सल कॉन्फ़िगर करो
निर्भरताएं गी इंस्टॉल करियै ते साढ़े प्रोजेक्ट फोल्डर साढ़े आस्तै कोडिंग शुरू करने आस्तै तैयार होने कन्नै, अस हून पार्सल गी कॉन्फ़िगर करी सकने आं ते अपने प्रोजेक्ट गी लोकल रूप कन्नै चला सकने आं। पार्सल गी अपने आप च डिजाइन आसेआ कोई कॉन्फ़िगरेशन फाइल दी लोड़ नेईं ऐ, पर असेंगी अपने सर्वर गी शुरू करने आस्तै इक npm स्क्रिप्ट ते इक HTML फाइल दी लोड़ ऐ।
-
src/index.htmlफाइल भर दे । पार्सल गी रेंडर करने आस्तै इक पृष्ठ दी लोड़ ऐ, इसलेई अस अपनेindex.htmlपृष्ठ दा उपयोग किश बुनियादी HTML सेट करने आस्तै करदे आं, जिंदे च साढ़ी CSS ते जावास्क्रिप्ट फाइलें बी शामल न।<!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. -
पार्सल एनपीएम स्क्रिप्टें गी जोड़ो। खोलो ते वस्तु
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
इस गाइड दे अगले ते अंतिम खंड च, अस बूटस्ट्रैप दे सारे CSS ते जावास्क्रिप्ट आयात करगे.
बूटस्ट्रैप आयात करो
पार्सल च बूटस्ट्रैप आयात करने लेई दो आयातें दी लोड़ होंदी ऐ, इक साढ़े styles.scssच ते इक साढ़े च main.js.
-
बूटस्ट्रैप दा सीएसएस आयात करो।
src/scss/styles.scssबूटस्ट्रैप दे सारे स्रोत Sass आयात करने लेई निम्नलिखित गी जोड़ो .// Import all of Bootstrap's CSS @import "~bootstrap/scss/bootstrap";जेकर तुस चांदे ओ तां तुस साढ़ी स्टाइलशीट गी बी व्यक्तिगत तौर पर आयात करी सकदे ओ। विस्तार लेई साढ़े Sass आयात डॉक्स पढ़ो ।
-
बूटस्ट्रैप दा जे एस आयात करो।
src/js/main.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 पर इक मुद्दा खोलो . समस्या निवारन च मदद दी लोड़ ऐ ? GitHub पर सर्च करो जां इक चर्चा शुरू करो ।