Bootstrap & Vite

Ko te aratohu whai mana mo te whakauru me te paihere i te CSS me te JavaScript a Bootstrap ki to kaupapa ma te whakamahi i te Vite.

I tenei wharangi

Kei te pirangi koe ki te peke ki te mutunga? Tikiake i te waehere puna me te demo mahi mo tenei aratohu mai i te rehitatanga twbs/tauira . Ka taea hoki e koe te whakatuwhera i te tauira i StackBlitz mo te whakatika ora.

Tatūnga

Kei te hangahia e matou he kaupapa Vite me Bootstrap mai i te timatanga, no reira kei reira etahi tikanga me nga kaupae o mua i mua i te tiimata. Ko tenei aratohu me whakauru koe i a Node.js me te mohio ki te tauranga.

Waihangahia he kōpaki kaupapa me te tatūnga npm. Ka hangahia e matou te my-projectkōpaki ka arawhiti i te npm me te -ytohenga kia kore ai e patai mai ki a matou nga patai tauwhitiwhiti katoa.
```
mkdir my-project && cd my-project
npm init -y
```
Tāuta Vite. Kaore i rite ki ta maatau aratohu Paetukutuku, he kotahi noa te ti'aturi taputapu hanga i konei. Ka whakamahia e matou --save-devki te tohu ko tenei whakawhirinaki mo te whakamahi whanaketanga anake, ehara mo te hanga.
```
npm i --save-dev vite
```
Tāutahia te Bootstrap. Inaianei ka taea e taatau te whakauru Bootstrap. Ka whakauruhia ano e matou a Popper na te mea ka whakawhirinaki a maatau whakahekenga, pouvers, me nga aki taputapu mo o raatau tuunga. Mena kaore koe e whakaaro ki te whakamahi i aua waahanga, ka taea e koe te waiho Popper konei.
```
npm i --save bootstrap @popperjs/core
```
Tāutahia atu te ti'aturi. I tua atu i a Vite me Bootstrap, me hiahia ano tatou ki tetahi atu whakawhirinakitanga (Sass) ki te kawe mai me te paihere i te CSS a Bootstrap.
```
npm i --save-dev sass
```

Inaianei kua oti katoa nga whakawhirinakitanga e tika ana kua whakauruhia me te tatūnga, ka taea e tatou te mahi ki te hanga i nga konae kaupapa me te kawemai i a Bootstrap.

Te hanganga kaupapa

Kua oti i a maatau te hanga i te my-projectkōpaki me te tiimata i te npm. Inaianei ka hanga ano e matou ta matou srckōpaki, pepa ahua, me te konae JavaScript hei whakaawhiwhi i te hanganga kaupapa. Whakahaerehia nga mea e whai ake nei mai i te my-project, te hanga a ringa ranei i te kōpaki me te hanganga konae kei raro nei.

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

Ina oti koe, me penei te ahua o to kaupapa:

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

I tenei wa, kei te waahi tika nga mea katoa, engari kaore a Vite e mahi na te mea kaore ano kia whakakiia a maatau vite.config.js.

Whirihora Vite

I te mea kua whakauruhia nga whakawhirinakitanga me ta maatau kōpaki kaupapa kua reri mo taatau ki te tiimata i te tohu, ka taea e taatau te whirihora i a Vite me te whakahaere i ta maatau kaupapa i te rohe.

Tuwhera vite.config.jsi roto i to ētita. I te mea kei te waatea, me taapiri atu he whirihoranga boilerplate ki reira kia taea ai e tatou te timata i ta tatou tūmau. Ko tenei waahanga o te whirihora e kii ana ki a Vite me rapu i te JavaScript o ta maatau kaupapa me pehea te mahi a te tūmau whanaketanga (te kumea mai i te srckōpaki me te uta wera).
```
const path = require('path')

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

Whai muri ka whakakiia e matou src/index.html. Koinei te wharangi HTML ka utaina e Vite ki te tirotiro ki te whakamahi i te CSS me te JS kua whakauruhia ka taapirihia e matou i nga waahanga o muri.

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

Kei te whakaurua e matou he ahua iti o Bootstrap styling i konei me te div class="container"a <button>kia kite tatou i te wa e utaina ana a Bootstrap CSS e Vite.

Inaianei kei te hiahia matou he tuhinga npm hei whakahaere i a Vite. Whakatuwherahia package.jsonka taapirihia te starttuhinga e whakaatuhia ana i raro nei (me whai koe i te tuhinga whakamatautau). Ka whakamahia e matou tenei tuhinga hei timata i to maatau Vite dev server.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ka mutu, ka taea e tatou te timata Vite. Mai i te my-projectkōpaki i roto i to tauranga, whakahaere i te tuhinga npm hou kua taapirihia:
```
npm start
```

I te waahanga o muri me te whakamutunga ki tenei aratohu, ka kawemai matou i nga CSS me JavaScript katoa a Bootstrap.

Kawemai Bootstrap

Whakaritea te kawemai a Bootstrap's Sass ki vite.config.js. Kua oti to konae whirihoranga, me taurite ki te wahanga o raro. Ko te waahanga hou anake kei konei ko te resolvewaahanga—ka whakamahia e matou tenei ki te taapiri i tetahi ingoa ingoa ki o maatau konae puna o roto node_moduleskia ngawari ai te kawemai.
```
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
  }
}
```
Inaianei, me kawemai a Bootstrap's CSS. Taapirihia nga mea e whai ake nei ki src/scss/styles.scsste kawemai i te puna katoa o Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ka taea hoki e koe te kawemai i a maatau pepa ahua takitahi ki te hiahia koe. Panuihia a maatau tuhinga kawemai a Sass mo nga taipitopito.
I muri mai ka utaina e matou te CSS me te kawemai i te JavaScript a Bootstrap. Tāpirihia nga mea e whai ake nei ki src/js/main.jste uta i te CSS me te kawemai i nga JS katoa a Bootstrap. Ka kawemai aunoa a Popper ma Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Ka taea hoki e koe te kawemai i nga monomai JavaScript takitahi ina hiahiatia kia heke iho te rahi o te paihere:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Panuihia a maatau tuhinga JavaScript mo etahi atu korero mo te whakamahi i nga taputapu a Bootstrap.
A kua oti koe! 🎉 Na te puna a Bootstrap a Sass me JS kua utaina katoa, me penei te ahua o to tuumau whanaketanga o to rohe.

Ka taea e koe te tiimata ki te taapiri i nga waahanga Bootstrap e hiahia ana koe ki te whakamahi. Kia mohio koe ki te tirotiro i te kaupapa tauira katoa o Vite mo te whakauru i etahi atu ritenga Sass me te arotau i to hanga ma te kawemai i nga waahanga o Bootstrap's CSS me JS e hiahia ana koe.

Ka kite i tetahi mea he, kua tawhito ranei i konei? Whakatuwheratia he take ki GitHub . Me awhina ki te rapu raruraru? Rapua, timata ranei he korerorero mo GitHub.