Bootstrap a Vite

Y canllaw swyddogol ar sut i gynnwys a bwndelu CSS a JavaScript Bootstrap yn eich prosiect gan ddefnyddio Vite.

Ar y dudalen hon

Eisiau neidio i'r diwedd? Lawrlwythwch y cod ffynhonnell a'r demo gweithredol ar gyfer y canllaw hwn o'r ystorfa twbs/enghreifftiau . Gallwch hefyd agor yr enghraifft yn StackBlitz ar gyfer golygu byw.

Gosod

Rydyn ni'n adeiladu prosiect Vite gyda Bootstrap o'r newydd, felly mae rhai rhagofynion a chamau ymlaen cyn y gallwn ni ddechrau o ddifrif. Mae'r canllaw hwn yn ei gwneud yn ofynnol i chi gael Node.js wedi'i osod a rhywfaint o gyfarwydd â'r derfynell.

Creu ffolder prosiect a gosod npm. Byddwn yn creu'r my-projectffolder ac yn cychwyn npm gyda'r -yddadl i osgoi gofyn y cwestiynau rhyngweithiol i ni i gyd.
```
mkdir my-project && cd my-project
npm init -y
```
Gosod Vite. Yn wahanol i'n canllaw Webpack, dim ond dibyniaeth ar offer adeiladu sengl sydd yma. Rydym yn defnyddio --save-devi nodi bod y ddibyniaeth hon ar gyfer defnydd datblygu yn unig ac nid ar gyfer cynhyrchu.
```
npm i --save-dev vite
```
Gosod Bootstrap. Nawr gallwn osod Bootstrap. Byddwn hefyd yn gosod Popper gan fod ein cwymplenni, popovers, a chynghorion offer yn dibynnu arno ar gyfer eu lleoli. Os nad ydych yn bwriadu defnyddio'r cydrannau hynny, gallwch hepgor Popper yma.
```
npm i --save bootstrap @popperjs/core
```
Gosod dibyniaeth ychwanegol. Yn ogystal â Vite a Bootstrap, mae arnom angen dibyniaeth arall (Sass) i fewnforio a bwndelu CSS Bootstrap yn iawn.
```
npm i --save-dev sass
```

Nawr bod gennym yr holl ddibyniaethau angenrheidiol wedi'u gosod a'u gosod, gallwn gyrraedd y gwaith o greu'r ffeiliau prosiect a mewnforio Bootstrap.

Strwythur y prosiect

Rydym eisoes wedi creu'r my-projectffolder ac wedi cychwyn npm. Nawr byddwn hefyd yn creu ein srcffolder, taflen arddull, a ffeil JavaScript i dalgrynnu strwythur y prosiect. Rhedwch y canlynol o my-project, neu crëwch y ffolder a'r strwythur ffeil a ddangosir isod â llaw.

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

Pan fyddwch wedi gorffen, dylai eich prosiect cyflawn edrych fel hyn:

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

Ar y pwynt hwn, mae popeth yn y lle iawn, ond ni fydd Vite yn gweithio oherwydd nid ydym wedi llenwi ein un ni vite.config.jseto.

Ffurfweddu Vite

Gyda dibyniaethau wedi'u gosod a'n ffolder prosiect yn barod i ni ddechrau codio, gallwn nawr ffurfweddu Vite a rhedeg ein prosiect yn lleol.

Agorwch vite.config.jsyn eich golygydd. Gan ei fod yn wag, bydd angen i ni ychwanegu rhywfaint o ffurfwedd plât boeler ato fel y gallwn gychwyn ein gweinydd. Mae'r rhan hon o'r ffurfwedd yn dweud wrth Vite y byddai'n chwilio am JavaScript ein prosiect a sut y dylai'r gweinydd datblygu ymddwyn (gan dynnu o'r srcffolder gydag ail-lwytho poeth).
```
const path = require('path')

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

Nesaf rydyn ni'n llenwi src/index.html. Dyma'r dudalen HTML y bydd Vite yn ei llwytho yn y porwr i ddefnyddio'r CSS wedi'u bwndelu a JS y byddwn yn ychwanegu ato mewn camau diweddarach.

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

Rydyn ni'n cynnwys ychydig o steilio Bootstrap yma gyda'r div class="container"ac <button>fel ein bod ni'n gweld pan fydd CSS Bootstrap yn cael ei lwytho gan Vite.

Nawr mae angen sgript npm i redeg Vite. Agorwch package.jsonac ychwanegwch y startsgript a ddangosir isod (dylai fod gennych y sgript prawf eisoes). Byddwn yn defnyddio'r sgript hon i gychwyn ein gweinydd Vite dev lleol.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ac yn olaf, gallwn ddechrau Vite. O'r my-projectffolder yn eich terfynell, rhedwch y sgript npm sydd newydd ei ychwanegu:
```
npm start
```

Yn yr adran nesaf ac olaf i'r canllaw hwn, byddwn yn mewnforio holl CSS a JavaScript Bootstrap.

Mewnforio Bootstrap

Gosodwch fewnforiad Bootstrap's Sass yn vite.config.js. Mae eich ffeil ffurfweddu bellach wedi'i chwblhau a dylai gyd-fynd â'r pyt isod. Yr unig ran newydd yma yw'r resolveadran - rydym yn defnyddio hwn i ychwanegu alias at ein ffeiliau ffynhonnell y tu mewn node_modulesi gadw mewnforion mor syml â phosibl.
```
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
  }
}
```
Nawr, gadewch i ni fewnforio CSS Bootstrap. Ychwanegwch y canlynol i src/scss/styles.scssfewngludo holl ffynhonnell Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Gallwch hefyd fewnforio ein dalennau arddull yn unigol os dymunwch. Darllenwch ein dogfennau mewnforio Sass am fanylion.
Nesaf rydyn ni'n llwytho'r CSS ac yn mewnforio JavaScript Bootstrap. Ychwanegwch y canlynol i src/js/main.jslwytho'r CSS a mewngludo holl JS Bootstrap. Bydd popper yn cael ei fewnforio yn awtomatig trwy Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Gallwch hefyd fewnforio ategion JavaScript yn unigol yn ôl yr angen i gadw meintiau bwndel i lawr:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Darllenwch ein dogfennau JavaScript i gael rhagor o wybodaeth am sut i ddefnyddio ategion Bootstrap.
Ac rydych chi wedi gorffen! 🎉 Gyda ffynhonnell Bootstrap, Sass a JS wedi'i llwytho'n llawn, dylai eich gweinydd datblygu lleol edrych fel hyn nawr.

Nawr gallwch chi ddechrau ychwanegu unrhyw gydrannau Bootstrap rydych chi am eu defnyddio. Gwnewch yn siŵr eich bod yn edrych ar y prosiect enghreifftiol Vite cyflawn i weld sut i gynnwys Sass personol ychwanegol a gwneud y gorau o'ch adeiladwaith trwy fewnforio dim ond y rhannau o CSS a JS Bootstrap sydd eu hangen arnoch chi.

Gweld rhywbeth o'i le neu wedi dyddio yma? Agorwch broblem ar GitHub . Angen help i ddatrys problemau? Chwiliwch neu dechreuwch drafodaeth ar GitHub.