Bootstrap & Vite

An treoir oifigiúil maidir le conas CSS agus JavaScript Bootstrap a áireamh agus a chuachadh i do thionscadal ag baint úsáide as Vite.

Ar an leathanach seo

Want a skip go dtí an deireadh? Íoslódáil an cód foinse agus an taispeántas oibre don treoir seo ón stór twbs/samplaí . Is féidir leat an sampla a oscailt freisin i StackBlitz le haghaidh eagarthóireacht bheo.

Socrú

Táimid ag tógáil tionscadal Vite le Bootstrap ón tús, mar sin tá roinnt réamhriachtanais agus céimeanna tosaigh sular féidir linn tosú i ndáiríre. Éilíonn an treoir seo go bhfuil Node.js suiteáilte agat agus cur amach éigin ar an teirminéal.

Cruthaigh fillteán tionscadail agus cumraigh npm. Cruthóimid an my-projectfillteán agus cuirfimid npm i dtosach leis an -yargóint chun é a sheachaint ag cur na gceisteanna idirghníomhacha orainn go léir.
```
mkdir my-project && cd my-project
npm init -y
```
Suiteáil Vite. Murab ionann agus ár dtreoir Webpack, níl ach spleáchas uirlis tógála amháin anseo. Bainimid úsáid as --save-deva chur in iúl nach bhfuil an spleáchas seo ach le haghaidh úsáide forbartha agus ní le haghaidh táirgeadh.
```
npm i --save-dev vite
```
Suiteáil Bootstrap. Anois is féidir linn Bootstrap a shuiteáil. Déanfaimid Popper a shuiteáil freisin ós rud é go mbraitheann ár gcuid dropdowns, popovers, agus leideanna uirlisí air chun iad a shuíomh. Mura bhfuil sé beartaithe agat na comhpháirteanna sin a úsáid, is féidir Popper a fhágáil ar lár anseo.
```
npm i --save bootstrap @popperjs/core
```
Suiteáil spleáchas breise. Chomh maith le Vite agus Bootstrap, tá spleáchas eile (Sass) ag teastáil uainn chun CSS Bootstrap a allmhairiú agus a chuachadh i gceart.
```
npm i --save-dev sass
```

Anois go bhfuil na spleáchais riachtanacha go léir suiteáilte agus socraithe againn, is féidir linn dul i mbun oibre ag cruthú na gcomhad tionscadail agus ag iompórtáil Bootstrap.

Struchtúr an tionscadail

Chruthaigheamar an my-projectfillteán cheana féin agus chuireamar tús leis npm. Anois cruthóimid ár srcbhfillteán, ár stílbhileog, agus ár gcomhad JavaScript freisin chun struchtúr an tionscadail a shlánú. Rith an méid seo a leanas ó my-project, nó cruthaigh an fillteán agus an struchtúr comhaid a thaispeántar thíos de láimh.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js

Nuair a bheidh tú críochnaithe, ba cheart go mbeadh cuma mar seo ar do thionscadal iomlán:

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

Ag an bpointe seo, tá gach rud san áit cheart, ach ní oibreoidh Vite toisc nach bhfuil ár gcuid líonta isteach againn vite.config.jsfós.

Cumraigh Vite

Le spleáchais suiteáilte agus ár bhfillteán tionscadail réidh chun tús a chur le códú, is féidir linn Vite a chumrú anois agus ár dtionscadal a reáchtáil go háitiúil.

Oscail vite.config.jsi d'eagarthóir. Ós rud é go bhfuil sé bán, beidh orainn roinnt cumraíochta pláta coire a chur leis ionas gur féidir linn ár bhfreastalaí a thosú. Insíonn an chuid seo den config go raibh Vite ag lorg JavaScript ár dtionscadal agus conas ba cheart don fhreastalaí forbartha é féin a iompar (ag tarraingt as an srcbhfillteán le hathlódáil te).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

Ansin líonaimid isteach src/index.html. Seo é an leathanach HTML a luchtóidh Vite sa bhrabhsálaí chun an CSS cuachta agus an JS a úsáid a chuirfimid leis i gcéimeanna níos déanaí.

<!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>

Táimid ag áireamh beagán de styling Bootstrap anseo leis an div class="container"agus <button>ionas go bhfeicfimid nuair a bheidh CSS Bootstrap luchtaithe ag Vite.

Anois tá script npm ag teastáil uainn chun Vite a rith. Oscail package.jsonagus cuir leis an startscript a thaispeántar thíos (ba cheart go mbeadh an script tástála agat cheana féin). Úsáidfimid an script seo chun ár bhfreastalaí áitiúil Vite dev a thosú.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Agus ar deireadh, is féidir linn tús a chur le Vite. Ón my-projectfhillteán i do chríochfort, rith an script npm nua-chur leis:
```
npm start
```

Sa chéad chuid eile agus sa chuid dheireanach den treoir seo, iompórtálfaimid CSS agus JavaScript Bootstrap ar fad.

Iompórtáil Bootstrap

Socraigh allmhairiú Sass Bootstrap i vite.config.js. Tá do chomhad cumraíochta críochnaithe anois agus ba cheart go mbeadh sé ag teacht leis an mblúire thíos. Is é an t-aon chuid nua anseo ná an resolverannán - bainimid úsáid as seo chun ailias a chur lenár gcomhaid foinse taobh istigh node_moduleschun allmhairí a choinneáil chomh simplí agus is féidir.
```
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
  }
}
```
Anois, déanaimis CSS Bootstrap a allmhairiú. Cuir an méid seo a leanas leis src/scss/styles.scsschun foinse Bootstrap go léir a allmhairiú Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Is féidir leat freisin ár stílbhileoga a allmhairiú ina n-aonar más mian leat. Léigh ár ndoiciméid allmhairiú Sass le haghaidh sonraí.
Ansin déanaimid an CSS a luchtú agus JavaScript Bootstrap a allmhairiú. Cuir an méid seo a leanas leis src/js/main.jschun an CSS a luchtú agus iompórtáil JS Bootstrap ar fad. Déanfar Popper a allmhairiú go huathoibríoch trí Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Is féidir leat freisin forlíontáin JavaScript a iompórtáil ina n-aonar de réir mar is gá chun méideanna cuachta a choinneáil síos:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Léigh ár ndoiciméid JavaScript le haghaidh tuilleadh eolais ar conas forlíontáin Bootstrap a úsáid.
Agus tá tú críochnaithe! 🎉 Agus foinse Bootstrap Sass agus JS lódáilte go hiomlán, ba cheart go mbeadh cuma mar seo ar do fhreastalaí forbartha áitiúil anois.

Anois is féidir leat tosú ag cur aon chomhpháirteanna Bootstrap is mian leat a úsáid. Bí cinnte an tionscadal samplach Vite iomlán a sheiceáil le haghaidh conas Sass saincheaptha breise a chur san áireamh agus do thógáil a bharrfheabhsú trí na codanna de CSS agus JS Bootstrap amháin atá uait a iompórtáil.

Féach ar rud éigin mícheart nó as dáta anseo? Oscail ceist ar GitHub le do thoil . Cabhair uait le fabhtcheartú? Cuardaigh nó cuir tús le plé ar GitHub.