Bootstrap & Vite

Ny torolalana ofisialy momba ny fomba hampidirana sy hamehezana ny CSS sy JavaScript an'ny Bootstrap amin'ny tetikasanao amin'ny fampiasana Vite.

Amin'ity pejy ity

Te hitsambikina hatramin'ny farany? Ampidino ny kaody loharano sy ny demo miasa ho an'ity torolàlana ity avy amin'ny tahiry twbs/examples . Azonao atao ihany koa ny manokatra ny ohatra ao amin'ny StackBlitz ho an'ny fanitsiana mivantana.

Hametraka

Manangana tetikasa Vite miaraka amin'ny Bootstrap hatrany am-boalohany izahay, noho izany dia misy fepetra sy dingana aloha vao tena manomboka. Ity torolàlana ity dia mitaky anao hametraka ny Node.js ary mahafantatra ny terminal.

Mamorona lahatahiry tetikasa ary amboary npm. Hamorona ny my-projectlahatahiry isika ary hanomboka ny npm miaraka amin'ny -ytohan-kevitra mba hialana amin'ny fametrahana ny fanontaniana mifandraika aminay.
```
mkdir my-project && cd my-project
npm init -y
```
Install Vite. Tsy sahala amin'ny torolàlana Webpack, tsy misy afa-tsy fiankinan-doha amin'ny fitaovana fananganana eto. Mampiasa --save-devfamantarana izahay fa io fiankinan-doha io dia natao ho an'ny fampandrosoana ihany fa tsy ho an'ny famokarana.
```
npm i --save-dev vite
```
Mametraka Bootstrap. Afaka mametraka Bootstrap isika izao. Hametraka Popper ihany koa izahay satria miankina amin'ny toerana misy azy ny dropdowns, popovers, ary ny tooltips. Raha tsy mikasa ny hampiasa ireo singa ireo ianao dia azonao atao ny manala ny Popper eto.
```
npm i --save bootstrap @popperjs/core
```
Mametraka fiankinan-doha fanampiny. Ho fanampin'ny Vite sy Bootstrap, mila fiankinan-doha hafa (Sass) isika mba hanafatra sy hamatotra tsara ny CSS Bootstrap.
```
npm i --save-dev sass
```

Amin'izao fotoana izao dia manana ny fiankinan-doha ilaina rehetra napetraka sy napetraka, afaka manomboka miasa amin'ny famoronana ny rakitra tetikasa ary manafatra Bootstrap.

Rafitra tetikasa

Efa namorona ny my-projectlahatahiry izahay ary nanangana npm. Ankehitriny dia hamorona ny srclahatahiry, ny stylesheet ary ny rakitra JavaScript izahay mba hamenoana ny rafitry ny tetikasa. Alefaso avy amin'ny my-project, na mamorona ny lahatahiry sy ny firafitry ny rakitra aseho etsy ambany.

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

Rehefa vita ianao dia tokony ho toy izao ny tetikasanao manontolo:

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

Amin'izao fotoana izao, ny zava-drehetra dia ao amin'ny toerana mety, fa ny Vite dia tsy mandeha satria tsy mbola nameno ny anay vite.config.js.

Configure Vite

Miaraka amin'ny fiankinan-doha napetraka sy ny lahatahiry tetik'asantsika efa vonona hanomboka ny kaody, dia afaka manamboatra ny Vite isika izao ary mampandeha ny tetikasantsika eo an-toerana.

Sokafy vite.config.jsao amin'ny editor-nao. Satria banga ilay izy, dia mila ampiana config boilerplate ao aminy isika mba hahafahantsika manomboka ny mpizara. Ity ampahany amin'ny config ity dia milaza amin'i Vite fa hikaroka ny JavaScript an'ny tetikasanay sy ny fomba tokony hitondran'ny mpizara fampandrosoana (misintona avy amin'ny srclahatahiry miaraka amin'ny famerenana mafana).
```
const path = require('path')

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

Manaraka izany dia fenoy ny src/index.html. Ity ny pejy HTML hapetraka ao amin'ny navigateur Vite hampiasa ny CSS sy JS mitambatra ho ampianay amin'ny dingana manaraka.

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

Ampidirinay eto ny styling Bootstrap kely miaraka amin'ny div class="container"ary <button>mba ho hitantsika hoe rahoviana ny CSS Bootstrap no entin'i Vite.

Mila script npm isika izao hampandehanana Vite. Sokafy package.jsonary ampio ny startscript aseho eto ambany (tokony efa manana ny script fitsapana ianao). Hampiasa ity script ity izahay hanombohana ny mpizara Vite dev eo an-toerana.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ary farany, afaka manomboka Vite isika. Avy amin'ny my-projectlahatahiry ao amin'ny terminal-nao, tadiavo ilay script npm vao nampidirina:
```
npm start
```

Ao amin'ny fizarana manaraka sy farany amin'ity torolàlana ity dia hanafatra ny CSS sy JavaScript rehetra an'ny Bootstrap izahay.

Import Bootstrap

Amboary ny fanafarana Sass an'ny Bootstrap amin'ny vite.config.js. Vita izao ny fisie fanefena anao ary tokony hifanaraka amin'ny snippet etsy ambany. Ny hany ampahany vaovao eto dia ny resolvefizarana—ampiasainay izany mba hanampiana alias amin'ny rakitra loharano ao anatiny node_modulesmba hitazonana ny fanafarana ho tsotra araka izay azo atao.
```
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
  }
}
```
Ankehitriny, andao hanafatra ny CSS Bootstrap. Ampio ity manaraka ity src/scss/styles.scssmba hanafatra ny loharanon'ny Bootstrap rehetra Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Azonao atao ihany koa ny manafatra ny stylesheets tsirairay raha tianao. Vakio ny antontan-taratasy fanafarana Sass ho an'ny antsipiriany.
Avy eo dia mameno ny CSS isika ary manafatra JavaScript's Bootstrap. Ampio ireto manaraka ireto mba src/js/main.jshampidirana ny CSS ary manafatra ny JS Bootstrap rehetra. Hafatra ho azy amin'ny alàlan'ny Bootstrap ny Popper.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
You can also import JavaScript plugins individually as needed to keep bundle sizes down:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Read our JavaScript docs for more information on how to use Bootstrap’s plugins.
And you’re done! 🎉 With Bootstrap’s source Sass and JS fully loaded, your local development server should now look like this.

Now you can start adding any Bootstrap components you want to use. Be sure to check out the complete Vite example project for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap’s CSS and JS that you need.

See something wrong or out of date here? Please open an issue on GitHub. Need help troubleshooting? Search or start a discussion on GitHub.