બુટસ્ટ્રેપ અને Vite

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

આ પૃષ્ઠ પર

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

સ્થાપના

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

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

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

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

અમે પહેલાથી જ 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 vite.config.js

જ્યારે તમે પૂર્ણ કરી લો, ત્યારે તમારો સંપૂર્ણ પ્રોજેક્ટ આના જેવો દેખાવો જોઈએ:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│   |   └── styles.scss
|   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js

આ બિંદુએ, બધું યોગ્ય સ્થાને છે, પરંતુ Vite કામ કરશે નહીં કારણ કે અમે vite.config.jsહજી સુધી ભર્યું નથી.

Vite ગોઠવો

ડિપેન્ડન્સી ઇન્સ્ટોલ કરીને અને કોડિંગ શરૂ કરવા માટે અમારા પ્રોજેક્ટ ફોલ્ડર તૈયાર હોવાથી, અમે હવે Vite ને કન્ફિગર કરી શકીએ છીએ અને અમારા પ્રોજેક્ટને સ્થાનિક રીતે ચલાવી શકીએ છીએ.

vite.config.jsતમારા એડિટરમાં ખોલો . તે ખાલી હોવાથી, અમારે તેમાં કેટલીક બોઈલરપ્લેટ રૂપરેખા ઉમેરવાની જરૂર પડશે જેથી અમે અમારું સર્વર શરૂ કરી શકીએ. રૂપરેખાનો આ ભાગ Vite ને અમારા પ્રોજેક્ટની JavaScript અને ડેવલપમેન્ટ સર્વર કેવી રીતે વર્તવું જોઈએ ( srcહોટ રીલોડ સાથે ફોલ્ડરમાંથી ખેંચવું) જોવાનું હતું તે કહે છે.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```
આગળ આપણે ભરીએ છીએ src/index.html. બંડલ કરેલ CSS અને JS નો ઉપયોગ કરવા માટે આ HTML પેજ Vite બ્રાઉઝરમાં લોડ થશે જેને અમે પછીના પગલાઓમાં ઉમેરીશું.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>
```
અમે અહીં થોડીક બુટસ્ટ્રેપ સ્ટાઇલનો સમાવેશ કરી રહ્યાં છીએ div class="container"અને <button>જેથી અમે જોઈ શકીએ કે ક્યારે બુટસ્ટ્રેપનું CSS Vite દ્વારા લોડ થાય છે.
હવે આપણને Vite ચલાવવા માટે npm સ્ક્રિપ્ટની જરૂર છે. નીચે દર્શાવેલ સ્ક્રિપ્ટ ખોલો package.jsonઅને ઉમેરો start(તમારી પાસે પહેલાથી જ ટેસ્ટ સ્ક્રિપ્ટ હોવી જોઈએ). અમે આ સ્ક્રિપ્ટનો ઉપયોગ અમારા સ્થાનિક Vite dev સર્વરને શરૂ કરવા માટે કરીશું.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
અને અંતે, અમે Vite શરૂ કરી શકીએ છીએ. તમારા ટર્મિનલના my-projectફોલ્ડરમાંથી, તે નવી ઉમેરેલી npm સ્ક્રિપ્ટ ચલાવો:
```
npm start
```

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

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

માં બુટસ્ટ્રેપની સાસ આયાત સેટ કરો vite.config.js. તમારી રૂપરેખાંકન ફાઇલ હવે પૂર્ણ થઈ ગઈ છે અને તે નીચેના સ્નિપેટ સાથે મેળ ખાતી હોવી જોઈએ. અહીંનો એકમાત્ર નવો ભાગ વિભાગ છે - આયાતને શક્ય તેટલી સરળ રાખવા resolveમાટે અમે તેનો ઉપયોગ અમારી સ્રોત ફાઇલોમાં ઉપનામ ઉમેરવા માટે કરીએ છીએ .node_modules
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
હવે, ચાલો બુટસ્ટ્રેપનું CSS આયાત કરીએ. src/scss/styles.scssબુટસ્ટ્રેપના તમામ સ્ત્રોત Sass ને આયાત કરવા માટે નીચેના ઉમેરો .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
જો તમે ઇચ્છો તો તમે વ્યક્તિગત રીતે અમારી સ્ટાઇલશીટ્સ પણ આયાત કરી શકો છો. વિગતો માટે અમારા Sass આયાત દસ્તાવેજો વાંચો .
આગળ આપણે CSS લોડ કરીએ છીએ અને બુટસ્ટ્રેપની JavaScript આયાત કરીએ છીએ. CSS લોડ કરવા માટે નીચેના ઉમેરો src/js/main.jsઅને તમામ બુટસ્ટ્રેપના JS આયાત કરો. પોપર બુટસ્ટ્રેપ દ્વારા આપમેળે આયાત કરવામાં આવશે.
```
// Import our custom CSS
import '../scss/styles.scss'

// 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 સંપૂર્ણપણે લોડ થયા પછી, તમારું સ્થાનિક વિકાસ સર્વર હવે આના જેવું દેખાવું જોઈએ.

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

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