બુટસ્ટ્રેપ અને પાર્સલ

પાર્સલનો ઉપયોગ કરીને તમારા પ્રોજેક્ટમાં બુટસ્ટ્રેપના CSS અને JavaScriptને કેવી રીતે સામેલ કરવા અને બંડલ કરવા તે માટેની સત્તાવાર માર્ગદર્શિકા.

આ પૃષ્ઠ પર

અંત સુધી છોડવા માંગો છો? twbs/examples repository માંથી આ માર્ગદર્શિકા માટે સ્ત્રોત કોડ અને કાર્યકારી ડેમો ડાઉનલોડ કરો . તમે સ્ટેકબ્લિટ્ઝમાં પણ ઉદાહરણ ખોલી શકો છો પરંતુ તેને ચલાવી શકતા નથી કારણ કે પાર્સલ હાલમાં ત્યાં સપોર્ટેડ નથી.

સ્થાપના

અમે શરૂઆતથી બુટસ્ટ્રેપ સાથે પાર્સલ પ્રોજેક્ટ બનાવી રહ્યાં છીએ, તેથી અમે ખરેખર પ્રારંભ કરી શકીએ તે પહેલાં કેટલીક પૂર્વજરૂરીયાતો અને આગળનાં પગલાં છે. આ માર્ગદર્શિકા માટે તમારે Node.js ઇન્સ્ટોલ કરેલ હોય અને ટર્મિનલ સાથે થોડી પરિચિતતા હોવી જરૂરી છે.

એક પ્રોજેક્ટ ફોલ્ડર બનાવો અને npm સેટ કરો. અમે my-projectફોલ્ડર બનાવીશું અને npm ને -yદલીલ સાથે પ્રારંભ કરીશું જેથી તે અમને બધા ઇન્ટરેક્ટિવ પ્રશ્નો પૂછે નહીં.
```
mkdir my-project && cd my-project
npm init -y
```
પાર્સલ ઇન્સ્ટોલ કરો. અમારી વેબપૅક માર્ગદર્શિકાથી વિપરીત, અહીં માત્ર એક જ બિલ્ડ ટૂલ નિર્ભરતા છે. પાર્સલ લેન્ગવેજ ટ્રાન્સફોર્મર્સ (જેમ કે સાસ)ને આપમેળે ઇન્સ્ટોલ કરશે કારણ કે તે તેને શોધે છે. અમે --save-devસંકેત આપવા માટે ઉપયોગ કરીએ છીએ કે આ નિર્ભરતા માત્ર વિકાસના ઉપયોગ માટે છે ઉત્પાદન માટે નહીં.
```
npm i --save-dev parcel
```
બુટસ્ટ્રેપ ઇન્સ્ટોલ કરો. હવે આપણે બુટસ્ટ્રેપ ઇન્સ્ટોલ કરી શકીએ છીએ. અમે પોપર પણ ઇન્સ્ટોલ કરીશું કારણ કે અમારા ડ્રોપડાઉન, પોપોવર્સ અને ટૂલટિપ્સ તેમની સ્થિતિ માટે તેના પર નિર્ભર છે. જો તમે તે ઘટકોનો ઉપયોગ કરવાનું વિચારતા નથી, તો તમે અહીં પોપરને છોડી શકો છો.
```
npm i --save bootstrap @popperjs/core
```

હવે જ્યારે અમારી પાસે બધી જરૂરી નિર્ભરતાઓ સ્થાપિત છે, અમે પ્રોજેક્ટ ફાઇલો બનાવવાનું અને બુટસ્ટ્રેપને આયાત કરવાનું કામ કરી શકીએ છીએ.

પ્રોજેક્ટ માળખું

અમે પહેલાથી જ my-projectફોલ્ડર બનાવ્યું છે અને npm ને આરંભ કરી દીધું છે. હવે અમે પ્રોજેક્ટ સ્ટ્રક્ચરને રાઉન્ડઆઉટ કરવા માટે અમારી srcફોલ્ડર, સ્ટાઇલશીટ અને JavaScript ફાઇલ પણ બનાવીશું. નીચે દર્શાવેલ ફોલ્ડર અને ફાઇલ સ્ટ્રક્ચર માંથી નીચે ચલાવો 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>જેથી અમે જોઈ શકીએ કે ક્યારે બુટસ્ટ્રેપનું CSS Webpack દ્વારા લોડ થાય છે.

પાર્સલ આપમેળે શોધી કાઢશે કે અમે સાસનો ઉપયોગ કરી રહ્યાં છીએ અને તેને સમર્થન આપવા માટે સાસ પાર્સલ પ્લગઇન ઇન્સ્ટોલ કરો. જો કે, જો તમે ઈચ્છો, તો તમે મેન્યુઅલી પણ ચલાવી શકો છો 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 સ્ક્રિપ્ટ ચલાવો:
```
npm start
```

આ માર્ગદર્શિકાના આગલા અને અંતિમ વિભાગમાં, અમે તમામ બુટસ્ટ્રેપના CSS અને JavaScript આયાત કરીશું.

બુટસ્ટ્રેપ આયાત કરો

પાર્સલમાં બુટસ્ટ્રેપ આયાત કરવા માટે બે આયાતોની જરૂર પડે છે, એક આપણામાં styles.scssઅને એક આપણામાં main.js.

બુટસ્ટ્રેપનું CSS આયાત કરો. 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'
```
બંડલના કદને નીચે રાખવા માટે તમે વ્યક્તિગત રીતે JavaScript પ્લગિન્સને પણ આયાત કરી શકો છો:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
બુટસ્ટ્રેપના પ્લગિન્સનો ઉપયોગ કેવી રીતે કરવો તે વિશે વધુ માહિતી માટે અમારા JavaScript દસ્તાવેજો વાંચો .
અને તમે પૂર્ણ કરી લો! 🎉 બુટસ્ટ્રેપના સ્ત્રોત Sass અને JS સંપૂર્ણપણે લોડ થયા પછી, તમારું સ્થાનિક વિકાસ સર્વર હવે આના જેવું દેખાવું જોઈએ.

હવે તમે ઉપયોગ કરવા માંગો છો તે કોઈપણ બુટસ્ટ્રેપ ઘટકો ઉમેરવાનું શરૂ કરી શકો છો. વધારાના કસ્ટમ Sass ને કેવી રીતે સમાવી શકાય તે માટે સંપૂર્ણ પાર્સલ ઉદાહરણ પ્રોજેક્ટ તપાસવાનું સુનિશ્ચિત કરો અને બુટસ્ટ્રેપના CSS અને JS ના ફક્ત તમને જરૂરી ભાગો આયાત કરીને તમારા બિલ્ડને ઑપ્ટિમાઇઝ કરો.

અહીં કંઈક ખોટું અથવા જૂનું દેખાય છે? કૃપા કરીને GitHub પર સમસ્યા ખોલો . મુશ્કેલીનિવારણ માટે મદદની જરૂર છે? GitHub પર શોધો અથવા ચર્ચા શરૂ કરો .