Bootstrap & Balíček

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

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 , ale nespustit jej, protože Parcel tam není aktuálně podporován.

Založit

Vytváříme Parcelový projekt 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 balíček. Na rozdíl od našeho průvodce Webpack je zde pouze jediná závislost na nástroji pro sestavení. Parcel automaticky nainstaluje jazykové transformátory (jako Sass), jakmile je detekuje. 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 parcel
```
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
```

Nyní, když máme nainstalované 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

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

V tuto chvíli je vše na správném místě, ale Parcel potřebuje ke spuštění našeho serveru HTML stránku a skript npm.

Konfigurace balíku

S nainstalovanými závislostmi a naší projektovou složkou připravenou k zahájení kódování můžeme nyní nakonfigurovat Parcel a spustit náš projekt lokálně. Parcel sám o sobě nevyžaduje žádný konfigurační soubor, ale ke spuštění našeho serveru potřebujeme skript npm a soubor HTML.

Vyplňte src/index.htmlsoubor. Parcel potřebuje stránku k vykreslení, takže naši index.htmlstránku používáme k nastavení některých základních HTML, včetně našich souborů CSS a JavaScript.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>

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

Parcel automaticky zjistí, že používáme Sass, a nainstaluje si plugin Sass Parcel , který to podporuje. Pokud však chcete, můžete spustit také ručně npm i --save-dev @parcel/transformer-sass.

Přidejte skripty Parcel npm. Otevřete package.jsona přidejte do objektu následující startskript scripts. Tento skript použijeme ke spuštění našeho vývojového serveru Parcel a vykreslení souboru HTML, který jsme vytvořili poté, co je zkompilován do distadresáře.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
A konečně můžeme začít Parcel. 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

Import Bootstrapu do Parcel vyžaduje dva importy, jeden do našeho styles.scssa jeden do našeho main.js.

Importujte CSS Bootstrapu. Přidejte následující k src/scss/styles.scssimportu všech zdrojových Sass Bootstrapu.
```
// 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 .
Importujte JS Bootstrapu. src/js/main.jsChcete -li importovat všechny JS Bootstrapu, přidejte následující . Popper bude automaticky importován přes Bootstrap.
```
// 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 Parcel, kde najdete, 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.