Bootstrap & Parcel

“Parcel” -i ulanyp, “Bootstrap” -yň CSS we JavaScript-i nädip goşmaly we birikdirmelidigi barada resmi gollanma.

Bu sahypada

Ahyryna geçmek isleýärsiňizmi? Bu gollanma üçin deslapky kody we iş demosyny twbs / mysallar ammaryndan göçürip alyň . Mysal üçin StackBlitz- de açyp bilersiňiz , ýöne işledip bolmaýar, sebäbi Parcel häzirki wagtda goldanylmaýar.

Gurmak

“Bootstrap” bilen noldan “Parcel” taslamasyny gurýarys, şonuň üçin hakykatdanam başlamazdan ozal käbir şertler we ýokarky ädimler bar. Bu gollanma size Node.js gurulmagyny we terminal bilen belli bir tanyşlygy talap edýär.

Taslama bukjasyny dörediň we npm guruň. Papkany dörederis we ähli interaktiw soraglary bermezlik my-projectüçin argument bilen npm başlarys .-y
```
mkdir my-project && cd my-project
npm init -y
```
Bölümi guruň. Webpack gollanmamyzdan tapawutlylykda, bu ýerde diňe bir gural guralyna baglylyk bar. Bölüm, dil kesgitleýjilerini (Sass ýaly) awtomatiki usulda gurar. --save-devBu garaşlylygyň önümçilik üçin däl-de, diňe ösüş üçin ulanylýandygyny görkezmek üçin ulanýarys .
```
npm i --save-dev parcel
```
Bootstrap guruň. Indi “Bootstrap” gurup bileris. Şeýle hem, Popper-i gurarys, sebäbi aşak düşýänlerimiz, açýan ýerlerimiz we gurallarymyz olaryň ýerleşişine baglydyr. Şol komponentleri ulanmagy meýilleşdirmeýän bolsaňyz, Popper-i şu ýerde goýup bilersiňiz.
```
npm i --save bootstrap @popperjs/core
```

Necessaryhli zerur garaşlylyklar gurlansoň, taslama faýllaryny döretmek we Bootstrap import etmek işine başlap bileris.

Taslamanyň gurluşy

Biz eýýäm my-projectbukjany döretdik we npm başladyk. srcIndi taslama gurluşyny jemlemek üçin bukjamyzy, stil tablisamyzy we JavaScript faýlymyzy dörederis . Aşakdakylary işlediň my-projectýa-da aşakda görkezilen bukjany we faýl gurluşyny el bilen dörediň.

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

Gutaranyňyzdan soň, doly taslamaňyz şeýle bolmaly:

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

Şu wagt hemme zat dogry ýerde, ýöne serwere başlamak üçin Parcel-e HTML sahypasy we npm skript gerek.

Bölümi sazlaň

Baglanyşyklar gurlup, kodlaşdyrmaga başlamagymyz üçin taslama bukjamyz bilen, indi “Parcel” -i sazlap, taslamamyzy ýerli derejede dolandyryp bileris. Bölümiň özi dizaýn boýunça hiç hili konfigurasiýa faýly talap etmeýär, ýöne serwerimizi başlamak üçin bize npm skript we HTML faýly gerek.

src/index.htmlFaýly dolduryň . Bölüm görkezmek üçin sahypa gerek, şonuň üçin index.htmlCSS we JavaScript faýllarymyzy goşmak bilen käbir esasy HTML gurmak üçin sahypamyzy ulanýarys.

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

Bootstrap-yň CSS-i Webpack tarapyndan haçan ýüklenendigini görmek üçin bu div class="container"ýerde biraz Bootstrap stilini goşýarys.<button>

Bölüm, Sass ulanýandygymyzy awtomatiki kesgitlär we ony goldamak üçin Sass Parcel pluginini gurar. Şeýle-de bolsa, isleseňiz el bilen işledip bilersiňiz npm i --save-dev @parcel/transformer-sass.

Parcel npm skriptlerini goşuň. Açyň we obýekte package.jsonaşakdaky startskript goşuň. scripts“Parcel” ösüş serwerimizi başlamak we katalogda jemlenenden soň döreden HTML faýlymyzy görkezmek üçin bu skripti ulanarys dist.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Netijede, “Parcel” -i başlap bileris. Terminalyňyzdaky bukjadan , my-projecttäze goşulan npm skriptini işlediň:
```
npm start
```

Bu gollanmanyň indiki we soňky bölüminde Bootstrap-yň ähli CSS we JavaScript-i import ederis.

Bootstrap import ediň

“Bootstrap” -y bukja import etmek iki sany importy talap edýär, biri biziňki styles.scss, beýlekisi main.js.

Bootstrap-yň CSS-ni import ediň. src/scss/styles.scssBootstrap-yň ähli çeşmesi Sass-y import etmek üçin aşakdakylary goşuň .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Şeýle hem isleseňiz, stil sahypalarymyzy aýratyn import edip bilersiňiz. Jikme-jiklikler üçin Sass import resminamalarymyzy okaň .
“Bootstrap” -yň JS-ni import ediň. src/js/main.js“Bootstrap” -yň ähli JS-lerini import etmek üçin aşakdakylary goşuň . Popper Bootstrap arkaly awtomatiki usulda getiriler.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Şeýle hem, bukjanyň ululygyny peseltmek üçin zerur bolanda JavaScript plaginlerini aýratyn import edip bilersiňiz:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Bootstrap-yň plaginlerini nädip ulanmalydygy barada has giňişleýin maglumat üçin JavaScript resminamalarymyzy okaň .
Sen gutardyň! Bo Bootstrap çeşmesi Sass we JS doly ýüklenensoň, ýerli ösüş serweri indi şeýle bolmaly.

Indi ulanmak isleýän islendik Bootstrap komponentleriňizi goşup bilersiňiz. Goşmaça adaty Sass-y nädip goşmalydygyny we diňe Bootstrap-yň CSS we JS-iň zerur böleklerini import edip, binany optimizirlemek üçin doly “Parcel” mysal taslamasyny gözden geçiriň .

Bu ýerde nädogry ýa-da köne bir zady görüň? GitHub-da bir mesele açmagyňyzy haýyş edýäris . Näsazlyklary düzetmek üçin kömek gerekmi? GitHub -da gözläň ýa-da çekişmä başlaň .