Bootstrap & Vite

Oficiální průvodce, jak zahrnout a sbalit CSS a JavaScript Bootstrapu do vašeho projektu pomocí Vite.

Na této straně

Chcete přeskočit na konec? Stáhněte si zdrojový kód a pracovní demo pro tuto příručku z úložiště twbs/examples . Můžete také otevřít příklad v StackBlitz pro živé úpravy.

Založit

Vytváříme projekt Vite s Bootstrap od nuly, takže před tím, než můžeme skutečně začít, existují určité předpoklady a kroky. Tato příručka vyžaduje, abyste měli nainstalovaný Node.js a určitou znalost terminálu.

Vytvořte složku projektu a nastavte npm. Vytvoříme my-projectsložku a inicializujeme npm s -yargumentem, aby nám nekladl všechny interaktivní otázky.
```
mkdir my-project && cd my-project
npm init -y
```
Nainstalujte Vite. Na rozdíl od našeho průvodce Webpack je zde pouze jediná závislost na nástroji pro sestavení. Používáme --save-devk signalizaci, že tato závislost je pouze pro vývojové použití a ne pro výrobu.
```
npm i --save-dev vite
```
Nainstalujte Bootstrap. Nyní můžeme nainstalovat Bootstrap. Nainstalujeme také Popper, protože na něm závisí umístění našich rozevíracích seznamů, vyskakovacích oken a popisků. Pokud tyto komponenty neplánujete používat, můžete zde Popper vynechat.
```
npm i --save bootstrap @popperjs/core
```
Nainstalujte další závislost. Kromě Vite a Bootstrapu potřebujeme další závislost (Sass), abychom správně importovali a sbalili CSS Bootstrapu.
```
npm i --save-dev sass
```

Nyní, když máme nainstalované a nastavené všechny potřebné závislosti, můžeme se pustit do vytváření souborů projektu a importu Bootstrapu.

Struktura projektu

Již jsme vytvořili my-projectsložku a inicializovali npm. Nyní také vytvoříme naši srcsložku, šablonu stylů a soubor JavaScript, abychom doplnili strukturu projektu. Spusťte následující z my-project, nebo ručně vytvořte strukturu složek a souborů zobrazenou níže.

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

Až budete hotovi, váš kompletní projekt by měl vypadat takto:

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

V tuto chvíli je vše na správném místě, ale Vite nebude fungovat, protože jsme ještě nevyplnili naše vite.config.js.

Nakonfigurujte Vite

S nainstalovanými závislostmi a s naší projektovou složkou připravenou k zahájení kódování můžeme nyní nakonfigurovat Vite a spustit náš projekt lokálně.

Otevřete vite.config.jsv editoru. Protože je prázdný, budeme do něj muset přidat nějakou standardní konfiguraci, abychom mohli spustit náš server. Tato část konfigurace říká Vite, že má hledat JavaScript našeho projektu a jak se má chovat vývojový server (stahování ze srcsložky s hot reload).
```
const path = require('path')

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

Dále vyplníme src/index.html. Toto je stránka HTML, kterou Vite načte do prohlížeče, aby využila přibalené CSS a JS, které k ní přidáme v pozdějších krocích.

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

Zahrnuli jsme sem trochu stylů Bootstrapu s div class="container"a <button>, abychom viděli, kdy Vite načte CSS Bootstrapu.

Nyní potřebujeme skript npm ke spuštění Vite. Otevřete package.jsona přidejte startskript zobrazený níže (měli byste již mít testovací skript). Tento skript použijeme ke spuštění našeho místního dev serveru Vite.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
A konečně můžeme začít Vite. Ze my-projectsložky v terminálu spusťte nově přidaný skript npm:
```
npm start
```

V další a poslední části této příručky importujeme všechny CSS a JavaScript Bootstrapu.

Importujte Bootstrap

Nastavte import Sass Bootstrapu v vite.config.js. Váš konfigurační soubor je nyní kompletní a měl by odpovídat úryvku níže. Jedinou novou částí je zde resolvesekce – používáme ji k přidávání aliasu do našich zdrojových souborů uvnitř node_modules, aby byl import co nejjednodušší.
```
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
  }
}
```
Nyní importujme CSS Bootstrapu. src/scss/styles.scssChcete -li importovat všechny zdrojové Sass Bootstrapu, přidejte následující .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Pokud chcete, můžete také importovat naše šablony stylů jednotlivě. Podrobnosti najdete v našich dokumentech k importu Sass .
Dále načteme CSS a importujeme JavaScript Bootstrapu. src/js/main.jsChcete -li načíst CSS a importovat všechny JS Bootstrapu, přidejte následující . Popper bude automaticky importován přes Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Zásuvné moduly JavaScript můžete také importovat jednotlivě podle potřeby, abyste snížili velikost balíků:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Přečtěte si naše dokumenty JavaScript pro více informací o tom, jak používat pluginy Bootstrap.
A máte hotovo! 🎉 S plně načteným zdrojovým kódem Sass a JS Bootstrapu by váš místní vývojový server měl nyní vypadat takto.

Nyní můžete začít přidávat jakékoli komponenty Bootstrap, které chcete použít. Nezapomeňte se podívat na kompletní ukázkový projekt Vite, jak zahrnout další vlastní Sass a optimalizovat své sestavení importováním pouze částí CSS a JS Bootstrapu, které potřebujete.

Vidíte zde něco špatného nebo zastaralého? Otevřete problém na GitHubu . Potřebujete pomoc s odstraňováním problémů? Vyhledejte nebo zahajte diskusi na GitHubu.