Bootstrap & Vite

ʻO ke alakaʻi alakaʻi no ka hoʻopili ʻana a hoʻopili i ka Bootstrap's CSS a me JavaScript i kāu papahana me ka hoʻohana ʻana iā Vite.

Ma kēia ʻaoʻao

Makemake ʻoe e lele i ka hopena? Hoʻoiho i ke kumu kumu a me ka demo hana no kēia alakaʻi mai ka waihona twbs/examples . Hiki iā ʻoe ke wehe i ka laʻana ma StackBlitz no ka hoʻoponopono ola.

Hoʻonoho

Ke kūkulu nei mākou i kahi papahana Vite me Bootstrap mai ka wā ʻōpala, no laila aia kekahi mau koi a me nā ʻanuʻu mua ma mua o ka hiki ke hoʻomaka maoli. Pono kēia alakaʻi iā ʻoe e hoʻokomo iā Node.js a me kahi kamaʻāina me ka terminal.

E hana i kahi waihona papahana a hoʻonohonoho i ka npm. E hana mākou i ka my-projectwaihona a hoʻomaka i ka npm me ka -yhoʻopaʻapaʻa e pale aku i ka nīnau ʻana iā mākou i nā nīnau pili āpau.
```
mkdir my-project && cd my-project
npm init -y
```
E hoʻouka iā Vite. ʻAʻole like i kā mākou alakaʻi Webpack, hoʻokahi wale nō mea hana hilinaʻi ma aneʻi. Hoʻohana mākou --save-deve hōʻailona i kēia hilinaʻi no ka hoʻohana hoʻomohala wale ʻana a ʻaʻole no ka hana ʻana.
```
npm i --save-dev vite
```
E hoʻouka i ka Bootstrap. I kēia manawa hiki iā mākou ke hoʻokomo iā Bootstrap. E hoʻokomo pū mākou iā Popper mai ka hilinaʻi ʻana o kā mākou dropdowns, popovers, a me nā hāmeʻa no ko lākou kūlana. Inā ʻaʻole ʻoe e hoʻolālā i ka hoʻohana ʻana i kēlā mau ʻāpana, hiki iā ʻoe ke haʻalele iā Popper ma aneʻi.
```
npm i --save bootstrap @popperjs/core
```
E hoʻouka i ka hilinaʻi hou. Ma waho aʻe o Vite a me Bootstrap, pono mākou i kahi hilinaʻi ʻē aʻe (Sass) e hoʻokomo pono a hoʻopili i kā Bootstrap's CSS.
```
npm i --save-dev sass
```

I kēia manawa ua loaʻa iā mākou nā mea hilinaʻi āpau i hoʻonohonoho ʻia a hoʻonohonoho ʻia, hiki iā mākou ke hana i ka hana ʻana i nā faila papahana a lawe mai iā Bootstrap.

Papahana papahana

Ua hana mua mākou i ka my-projectwaihona a hoʻomaka i ka npm. I kēia manawa, hana mākou i kā mākou srcwaihona, stylesheet, a me JavaScript file e hoʻopuni ai i ke ʻano o ka papahana. E holo i kēia mai my-project, a i ʻole e hana lima i ka waihona a me ka hoʻolālā waihona i hōʻike ʻia ma lalo nei.

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

Ke pau ʻoe, pono kāu papahana piha e like me kēia:

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

I kēia manawa, aia nā mea āpau ma kahi kūpono, akā ʻaʻole e hana ʻo Vite no ka mea ʻaʻole mākou i hoʻopiha i kā mākou vite.config.js.

E hoʻonohonoho iā Vite

Me nā mea hilinaʻi i kau ʻia a mākaukau kā mākou waihona papahana no mākou e hoʻomaka i ka coding, hiki iā mākou ke hoʻonohonoho iā Vite a holo i kā mākou papahana ma ka ʻāina.

E wehe vite.config.jsi kāu hoʻoponopono. No ka mea he hakahaka, pono mākou e hoʻohui i kekahi config boilerplate iā ia i hiki iā mākou ke hoʻomaka i kā mākou kikowaena. Hōʻike kēia ʻāpana o ka config iā Vite e ʻimi i kā mākou papahana JavaScript a pehea e hana ai ke kikowaena hoʻomohala (huki mai ka srcwaihona me ka hoʻouka wela).
```
const path = require('path')

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

A laila hoʻopiha mākou i src/index.html. ʻO kēia ka ʻaoʻao HTML a Vite e hoʻouka ai i ka polokalamu kele pūnaewele e hoʻohana i ka pūʻulu CSS a me JS a mākou e hoʻohui ai iā ia ma nā pae hope.

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

Ke hoʻokomo nei mākou i kahi mea liʻiliʻi o Bootstrap styling ma aneʻi me ka div class="container"a <button>no laila mākou e ʻike ai i ka wā e hoʻouka ʻia ai kā Bootstrap CSS e Vite.

I kēia manawa pono mākou i kahi palapala npm e holo i Vite. E wehe package.jsona hoʻohui i ka startpalapala i hōʻike ʻia ma lalo nei (pono ʻoe e loaʻa i ka hōʻike hōʻike). E hoʻohana mākou i kēia ʻatikala e hoʻomaka i kā mākou kikowaena Vite dev kūloko.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
A ʻo ka hope, hiki iā mākou ke hoʻomaka iā Vite. Mai ka my-projectwaihona i kāu kikowaena, e holo i ka hōʻailona npm hou:
```
npm start
```

Ma ka ʻāpana aʻe a me ka hope o kēia alakaʻi, e hoʻokomo mākou i nā CSS a me JavaScript a Bootstrap.

Lawe mai i Bootstrap

E hoʻonohonoho i kā Bootstrap Sass import ma vite.config.js. Ua hoʻopau ʻia kāu faila hoʻonohonoho a pono e kūlike me ka snippet ma lalo. ʻO ka ʻāpana hou wale nō ma ʻaneʻi ʻo ia ka resolveʻāpana - hoʻohana mākou i kēia e hoʻohui i kahi inoa i kā mākou waihona kumu i loko node_modulese mālama i nā mea lawe mai me ka maʻalahi.
```
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
  }
}
```
I kēia manawa, e hoʻokomo i kā Bootstrap CSS. E hoʻohui i kēia src/scss/styles.scsse hoʻokomo i nā kumu a pau o Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Hiki nō hoʻi iā ʻoe ke hoʻokomo i kā mākou stylesheets pākahi inā makemake ʻoe. E heluhelu i kā mākou Sass import docs no nā kikoʻī.
A laila, hoʻouka mākou i ka CSS a lawe mai i ka JavaScript's Bootstrap. Hoʻohui i kēia src/js/main.jse hoʻouka i ka CSS a hoʻokomo i nā JS a pau o Bootstrap. E lawe ʻia mai ʻo Popper ma o Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Hiki iā ʻoe ke hoʻokomo i nā plugins JavaScript i kēlā me kēia mea e pono ai e mālama i ka nui o ka pūpū:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
E heluhelu i kā mākou mau palapala JavaScript no ka ʻike hou aku e pili ana i ka hoʻohana ʻana i nā plugins Bootstrap.
A ua pau ʻoe! 🎉 Me ke kumu o Bootstrap Sass a me JS i hoʻopiha piha ʻia, pono ke ʻano o kāu kikowaena hoʻomohala kūloko e like me kēia.

I kēia manawa hiki iā ʻoe ke hoʻomaka e hoʻohui i nā ʻāpana Bootstrap āu e makemake ai e hoʻohana. E ʻoluʻolu e nānā i ka papahana hiʻohiʻona Vite piha no ka hoʻopili ʻana i nā Sass maʻamau hou a hoʻonui i kāu kūkulu ma ka lawe ʻana i nā ʻāpana o Bootstrap's CSS a me JS āu e pono ai.

E ʻike i kekahi mea hewa a i ʻole ka wā kahiko ma aneʻi? E ʻoluʻolu e wehe i kahi pilikia ma GitHub . Pono e kōkua i ka hoʻoponopono pilikia? Huli a hoʻomaka i kahi kūkākūkā ma GitHub.