Bootstrap & Parcel

Oficialus vadovas, kaip įtraukti ir susieti „Bootstrap“ CSS ir „JavaScript“ į savo projektą naudojant „Parcel“.

Šiame puslapyje

Norite pereiti iki galo? Atsisiųskite šio vadovo šaltinio kodą ir demonstracinę versiją iš twbs/examples saugyklos . Taip pat galite atidaryti pavyzdį „StackBlitz“, bet jo nepaleisti, nes „Parcel“ šiuo metu ten nepalaikomas.

Sąranka

Mes kuriame „Parcel“ projektą naudodami „Bootstrap“ nuo nulio, todėl tam, kad galėtume pradėti, reikia atlikti tam tikras būtinas sąlygas ir žingsnius. Šiame vadove reikia turėti įdiegtą Node.js ir šiek tiek susipažinti su terminalu.

Sukurkite projekto aplanką ir nustatykite npm. Sukursime my-projectaplanką ir inicijuosime npm su -yargumentu, kad jis neužduotų mums visų interaktyvių klausimų.
```
mkdir my-project && cd my-project
npm init -y
```
Įdiekite siuntinį. Skirtingai nuo mūsų žiniatinklio paketo vadovo, čia yra tik viena kūrimo įrankio priklausomybė. „Parcel“ automatiškai įdiegs kalbos transformatorius (pvz., „Sass“), kai juos aptiks. Mes naudojame --save-devsignalą, kad ši priklausomybė skirta tik plėtrai, o ne gamybai.
```
npm i --save-dev parcel
```
Įdiekite „Bootstrap“. Dabar galime įdiegti „Bootstrap“. Taip pat įdiegsime „Popper“, nes mūsų išskleidžiamieji meniu, iššokantys langai ir patarimai priklauso nuo jo padėties. Jei neplanuojate naudoti šių komponentų, galite praleisti Popper čia.
```
npm i --save bootstrap @popperjs/core
```

Dabar, kai įdiegėme visas būtinas priklausomybes, galime pradėti kurti projekto failus ir importuoti „Bootstrap“.

Projekto struktūra

Mes jau sukūrėme my-projectaplanką ir inicijavome npm. Dabar taip pat sukursime srcaplanką, stiliaus lentelę ir „JavaScript“ failą, kad užbaigtume projekto struktūrą. Vykdykite toliau nurodytus veiksmus iš my-project, arba rankiniu būdu sukurkite toliau pateiktą aplanko ir failo struktūrą.

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

Kai baigsite, visas jūsų projektas turėtų atrodyti taip:

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

Šiuo metu viskas yra tinkamoje vietoje, bet „Parcel“ reikia HTML puslapio ir npm scenarijaus, kad paleistų mūsų serverį.

Konfigūruoti siuntinį

Įdiegę priklausomybes ir paruošę projekto aplanką, kad galėtume pradėti koduoti, dabar galime konfigūruoti siuntinį ir vykdyti projektą vietoje. Pačiam siuntiniui nereikia jokio konfigūracijos failo, tačiau mums reikia npm scenarijaus ir HTML failo, kad paleistume serverį.

Užpildykite src/index.htmlfailą. Siuntiniui reikia pateikti puslapį, todėl naudojame savo index.htmlpuslapį, kad nustatytų pagrindinį HTML, įskaitant CSS ir JavaScript failus.

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

Čia įtraukiame šiek tiek „Bootstrap“ stiliaus su div class="container"ir <button>, kad pamatytume, kada „Bootstrap“ CSS įkeliamas Webpack.

„Siuntinys“ automatiškai aptiks, kad naudojame „Sass“, ir įdiegs „ Sass Parcel“ papildinį , kad jį palaikytų. Tačiau, jei norite, galite paleisti ir rankiniu būdu npm i --save-dev @parcel/transformer-sass.

Pridėkite siuntinio npm scenarijus. Atidarykite package.jsonir pridėkite šį startscenarijų prie scriptsobjekto. Naudosime šį scenarijų, norėdami paleisti siuntų kūrimo serverį ir pateikti sukurtą HTML failą, kai jis bus sukompiliuotas į distkatalogą.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Ir pagaliau galime pradėti siuntinį. Iš my-projectsavo terminalo aplanko paleiskite tą naujai pridėtą npm scenarijų:
```
npm start
```

Kitame ir paskutiniame šio vadovo skyriuje importuosime visą „Bootstrap“ CSS ir „JavaScript“.

Importuoti Bootstrap

Norint importuoti Bootstrap į siuntinį, reikia du kartus importuoti: vieną į mūsų styles.scssir kitą į mūsų main.js.

Importuokite „Bootstrap“ CSS. Pridėkite toliau pateiktą, src/scss/styles.scsskad importuotumėte visą „Bootstrap“ šaltinį „Sass“.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Taip pat galite importuoti mūsų stilių lapus atskirai, jei norite. Norėdami gauti daugiau informacijos, skaitykite mūsų Sass importavimo dokumentus .
Importuokite „Bootstrap“ JS. src/js/main.jsNorėdami importuoti visą „Bootstrap“ JS, pridėkite toliau pateiktą informaciją. „Popper“ bus automatiškai importuotas per „Bootstrap“.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Taip pat galite importuoti „JavaScript“ papildinius atskirai, jei reikia, kad sumažintumėte paketų dydį:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Norėdami gauti daugiau informacijos apie tai, kaip naudoti „Bootstrap“ papildinius, skaitykite „JavaScript“ dokumentus .
Ir viskas! 🎉 Kai Bootstrap šaltinis Sass ir JS yra visiškai įkelti, jūsų vietinis kūrimo serveris dabar turėtų atrodyti taip.

Dabar galite pradėti pridėti bet kokius „Bootstrap“ komponentus, kuriuos norite naudoti. Būtinai peržiūrėkite visą „Parcel“ pavyzdinį projektą , kaip įtraukti papildomą tinkintą „Sass“ ir optimizuoti savo kūrimą importuodami tik jums reikalingas „Bootstrap“ CSS ir JS dalis.

Matote čia kažką ne taip ar pasenę? Atidarykite problemą „GitHub“ . Reikia pagalbos sprendžiant triktis? Ieškokite arba pradėkite diskusiją „GitHub“.