Bootstrap & Vite

Pituduh resmi pikeun kumaha carana ngalebetkeun sareng ngabuntel CSS sareng JavaScript Bootstrap dina proyék anjeun nganggo Vite.

Dina kaca ieu

Rék skip ka tungtungna? Unduh kode sumber sareng demo kerja pikeun pituduh ieu tina gudang twbs/conto . Anjeun ogé tiasa muka conto dina StackBlitz pikeun ngedit langsung.

Disetél

Kami nuju ngawangun proyék Vite sareng Bootstrap ti mimiti, janten aya sababaraha prasarat sareng léngkah-léngkah sateuacan urang leres-leres tiasa ngamimitian. Pituduh ieu ngabutuhkeun anjeun pikeun masang Node.js sareng sababaraha familiarity sareng terminal.

Jieun folder proyék jeung setelan npm. Kami bakal nyiptakeun my-projectpolder sareng ngamimitian npm kalayan -yargumen pikeun ngahindarkeun naroskeun ka urang sadaya patarosan interaktif.
```
mkdir my-project && cd my-project
npm init -y
```
Pasang Vite. Beda sareng pituduh Webpack kami, ngan ukur aya hiji katergantungan alat ngawangun di dieu. Kami nganggo --save-devsinyal yén kagumantungan ieu ngan ukur pikeun panggunaan pangwangunan sareng sanés pikeun produksi.
```
npm i --save-dev vite
```
Pasang Bootstrap. Ayeuna urang tiasa masang Bootstrap. Urang ogé bakal masang Popper saprak dropdowns kami, popovers, sarta tooltips gumantung kana eta pikeun positioning maranéhna. Upami anjeun henteu ngarencanakeun ngagunakeun komponén éta, anjeun tiasa ngaleungitkeun Popper di dieu.
```
npm i --save bootstrap @popperjs/core
```
Pasang kagumantungan tambahan. Salian Vite sareng Bootstrap, urang peryogi kagumantungan anu sanés (Sass) pikeun ngimpor leres sareng ngabuntel CSS Bootstrap.
```
npm i --save-dev sass
```

Ayeuna urang gaduh sadaya katergantungan anu dipikabutuh dipasang sareng disetél, urang tiasa damel pikeun nyiptakeun file proyék sareng ngimpor Bootstrap.

Struktur proyék

Kami parantos nyiptakeun my-projectfolder sareng ngamimitian npm. Ayeuna urang ogé bakal nyieun srcfolder urang, stylesheet, sarta file JavaScript pikeun buleud kaluar struktur proyék. Jalankeun di handap ieu tina my-project, atanapi jieun sacara manual folder sareng struktur file anu dipidangkeun di handap.

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

Sawaktos Anjeun geus rengse, proyék lengkep Anjeun kedah kasampak kawas kieu:

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

Dina titik ieu, sadayana aya dina tempat anu leres, tapi Vite moal jalan sabab kami henteu acan ngeusian vite.config.js.

Konpigurasikeun Vite

Kalayan katergantungan dipasang sareng folder proyék kami siap pikeun urang ngamimitian coding, ayeuna urang tiasa ngonpigurasikeun Vite sareng ngajalankeun proyék urang sacara lokal.

Buka vite.config.jsdina editor Anjeun. Kusabab éta kosong, urang kedah nambihan sababaraha config boilerplate kana éta supados urang tiasa ngamimitian server kami. Ieu bagian tina config ngabejaan Vite éta néangan JavaScript proyék urang jeung kumaha server ngembangkeun kedah kalakuanana (narik tina srcfolder kalawan ulang panas).
```
const path = require('path')

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

Salajengna urang eusian src/index.html. Ieu halaman HTML Vite bakal dimuat dina browser pikeun ngamangpaatkeun CSS sareng JS anu dibuntel, kami bakal nambihanana dina léngkah-léngkah salajengna.

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

Kami kalebet sakedik gaya Bootstrap di dieu sareng div class="container"sareng <button>supados urang ningali nalika CSS Bootstrap dimuat ku Vite.

Ayeuna urang peryogi skrip npm pikeun ngajalankeun Vite. Buka package.jsonsareng tambahkeun startskrip anu dipidangkeun di handap (anjeun kedah gaduh naskah tés). Urang bakal ngagunakeun skrip ieu pikeun ngamimitian server Vite dev lokal urang.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Sarta pamustunganana, urang bisa ngamimitian Vite. Tina my-projectpolder di terminal anjeun, jalankeun skrip npm anu nembé nambihan:
```
npm start
```

Dina bagian hareup jeung ahir pituduh ieu, urang bakal ngimpor sakabéh CSS jeung JavaScript Bootstrap urang.

Impor Bootstrap

Nyetél impor Sass Bootstrap di vite.config.js. Berkas konfigurasi anjeun parantos réngsé sareng kedah cocog sareng snippet di handap. Hiji-hijina bagian anyar di dieu nyaéta resolvebagian - kami nganggo ieu pikeun nambihan landian kana file sumber kami di jero node_modulespikeun ngajaga impor sasederhana mungkin.
```
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
  }
}
```
Ayeuna, hayu urang ngimpor CSS Bootstrap. Tambihkeun di handap ieu src/scss/styles.scsspikeun ngimpor sadaya sumber Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Anjeun ogé tiasa ngimpor lambaran gaya urang masing-masing upami anjeun hoyong. Baca dokumén impor Sass kami pikeun detil.
Salajengna urang muka CSS jeung impor Bootstrap urang JavaScript. Tambahkeun di handap pikeun src/js/main.jsmuka CSS jeung ngimpor sakabéh JS Bootstrap urang. Popper bakal diimpor sacara otomatis ngaliwatan Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Anjeun ogé tiasa ngimpor plugin JavaScript masing-masing upami diperyogikeun pikeun ngajaga ukuran bungkusan:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Baca docs JavaScript kami pikeun émbaran nu langkung lengkep ihwal kumaha cara ngagunakeun plugins Bootstrap.
Jeung anjeun geus rengse! 🎉 Kalayan sumber Bootstrap Sass sareng JS pinuh dimuat, pangladén pangembangan lokal anjeun ayeuna kedah siga kieu.

Ayeuna anjeun tiasa ngamimitian nambihan komponén Bootstrap anu anjeun hoyong dianggo. Pastikeun pikeun pariksa kaluar proyék conto Vite lengkep pikeun kumaha carana ngalebetkeun custom Sass tambahan sarta ngaoptimalkeun wangunan anjeun ku importing ukur bagian tina Bootstrap urang CSS jeung JS nu peryogi.

Ningali lepat atanapi ketinggalan jaman di dieu? Mangga buka masalah dina GitHub . Butuh pitulung pikeun ngungkulan? Pilarian atanapi ngamimitian diskusi dina GitHub.