Bootstrap & Parcel

Nhungamiro yepamutemo yekubatanidza uye kuunganidza Bootstrap's CSS uye JavaScript mupurojekiti yako uchishandisa Parcel.

Pa peji ino

Unoda kusvetuka kusvika kumagumo? Dhawunirodha iyo kodhi kodhi uye yekushanda demo yegwaro iri kubva kune twbs/examples repository . Iwe unogona zvakare kuvhura iyo muenzaniso muStackBlitz asi kwete kuimhanyisa nekuti Parcel haisati yatsigirwa ipapo.

Gadzirira

Tiri kuvaka Parcel purojekiti neBootstrap kubva pakutanga, saka pane zvimwe zvinodikanwa uye nhanho dzepamberi tisati tanyatsotanga. Gwaro iri rinoda kuti iwe uve neNode.js yakaiswa uye kumwe kujairana neiyo terminal.

Gadzira purojekiti folda uye setup npm. Isu tichagadzira iyo my-projectfolda uye totanga npm -ynekupokana kuti tidzivise kutibvunza mibvunzo yese inopindirana.
```
mkdir my-project && cd my-project
npm init -y
```
Isa Parcel. Kusiyana negwara redu reWebpack, pane chete kutsamira kwechishandiso chimwe chete pano. Parcel inozoisa otomatiki mashanduri emutauro (seSass) sezvainoaona. Isu tinoshandisa --save-devkuratidza kuti kutsamira uku ndekwekushandiswa kwekusimudzira kwete kugadzira.
```
npm i --save-dev parcel
```
Isa Bootstrap. Iye zvino tinogona kuisa Bootstrap. Tichaisawo Popper sezvo kudonhedza kwedu, mapopovers, uye maturusi ezvishandiso zvinoenderana nazvo pazvinzvimbo zvavo. Kana iwe usingaronge kushandisa izvo zvikamu, unogona kusiya Popper pano.
```
npm i --save bootstrap @popperjs/core
```

Iye zvino zvatine zvese zvinodiwa zvinomisikidzwa, tinogona kusvika kubasa kugadzira mafaera eprojekiti uye kupinza Bootstrap.

Chirongwa cheprojekiti

Isu takatogadzira my-projectfolda uye takatanga npm. Iye zvino tichagadzirawo srcfolda yedu, stylesheet, uye JavaScript faira kutenderedza chimiro cheprojekiti. Mhanya zvinotevera kubva my-project, kana nemaoko gadzira iyo folda uye faira chimiro chinoratidzwa pazasi.

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

Kana wapedza, chirongwa chako chakazara chinofanira kutaridzika seizvi:

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

Panguva ino, zvese zviri munzvimbo chaiyo, asi Parcel inoda HTML peji uye npm script kuti itange yedu server.

Gadzirisa Parcel

Nekutsamira kwakaiswa uye yedu purojekiti folda yakagadzirira kuti isu titange kukodha, isu tinogona ikozvino kugadzirisa Parcel uye kumhanyisa chirongwa chedu munharaunda. Parcel pachayo haidi faira yekumisikidza nedhizaini, asi isu tinoda npm script uye HTML faira kuti titange server yedu.

Zadza src/index.htmlfaira. Parcel inoda peji rekupa, saka isu tinoshandisa index.htmlpeji redu kumisa imwe yakakosha HTML, kusanganisira yedu CSS uye JavaScript mafaera.

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

Isu tiri kusanganisira zvishoma zveBootstrap styling pano neiyo div class="container"uye <button>kuti isu tione kana Bootstrap's CSS inotakurwa neWebpack.

Parcel inozoona kuti tiri kushandisa Sass uye kuisa Sass Parcel plugin kuti itsigire. Nekudaro, kana uchida, iwe unogona zvakare kumhanya nemaoko npm i --save-dev @parcel/transformer-sass.

Wedzera iyo Parcel npm zvinyorwa. Vhura iyo package.jsonuye wedzera inotevera startscript scriptskuchinhu. Tichashandisa chinyorwa ichi kutanga yedu Parcel yekuvandudza server uye kupa iyo HTML faira yatakagadzira mushure mekunge yaunganidzwa distmudhairekitori.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Uye pakupedzisira, tinogona kutanga Parcel. Kubva pane my-projectfolda mune yako terminal, mhanyisa iyo ichangobva kuwedzerwa npm script:
```
npm start
```

Muchikamu chinotevera uye chekupedzisira kugwaro iri, tichapinza ese eBootstrap's CSS neJavaScript.

Ngenisa Bootstrap

Kupinza Bootstrap muParcel kunoda zviviri kunze kwenyika, imwe mune yedu styles.scssuye imwe mune yedu main.js.

Ngenisa Bootstrap's CSS. Wedzera zvinotevera src/scss/styles.scsskuunza kunze kweBootstrap's source Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Iwe unogona zvakare kuunza edu masitayera ega kana uchida. Verenga yedu Sass import docs kuti uwane ruzivo.
Ngenisa Bootstrap's JS. Wedzera zvinotevera src/js/main.jskuunza kunze kweBootstrap's JS. Popper ichaendeswa kunze kwenyika kuburikidza neBootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Iwe unogona zvakare kupinza JavaScript plugins mumwe nemumwe sezvinodiwa kuti uchengetedze saizi dzemasumbu pasi:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Verenga yedu JavaScript docs kuti uwane rumwe ruzivo nezve mashandisiro eBootstrap's plugins.
Uye wapedza! 🎉 NeBootstrap 's sosi Sass uye JS yakazara yakazara, yako yenzvimbo yekuvandudza sevha inofanirwa kutaridzika seizvi.

Iye zvino unogona kutanga kuwedzera chero zvinhu zveBootstrap zvaunoda kushandisa. Ita shuwa yekutarisa yakazara Parcel muenzaniso purojekiti yekubatanidza yakawedzera tsika Sass uye optimize chivakwa chako nekuunza kunze chete zvikamu zveBootstrap's CSS uye JS yaunoda.

Unoona chimwe chinhu chisina kunaka kana chekare pano? Ndokumbira uvhure nyaya paGitHub . Unoda rubatsiro kugadzirisa dambudziko? Tsvaga kana tanga nhaurirano paGitHub.