Bootstrap & ngwugwu

Ntuziaka gọọmentị maka otu esi etinye na chịkọta Bootstrap's CSS na JavaScript na ọrụ gị site na iji Parcel.

Na ibe a

Achọrọ ịmafe na njedebe? Budata koodu iyi yana ngosi ngosi arụ ọrụ maka ntuziaka a site na ebe nchekwa twbs/ihe atụ . Ị nwekwara ike imepe ihe atụ na StackBlitz mana anaghị agba ya n'ihi na akwadoghị Parcel ugbu a ebe ahụ.

Melite

Anyị na-eji Bootstrap na-arụ ọrụ ngwugwu, yabụ enwere ụfọdụ ihe achọrọ na nzọụkwụ dị n'ihu tupu anyị enwee ike ibido. Ntuziaka a chọrọ ka etinyere Node.js yana ụfọdụ amata na njedebe.

Mepụta folda ọrụ wee hazie npm. Anyị ga-emepụta my-projectfolda ahụ wee jiri arụmụka bido npm -yka ọ ghara ịjụ anyị ajụjụ niile gbasara mmekọrịta.
```
mkdir my-project && cd my-project
npm init -y
```
Wụnye ngwugwu. N'adịghị ka ntuziaka Webpack anyị, enwere naanị otu ịdabere na ngwa nrụpụta ebe a. Parcel ga-etinye ihe ntụgharị asụsụ na-akpaghị aka (dị ka Sass) ka ọ na-achọpụta ha. Anyị na-eji --save-devgosi na ndabere a bụ naanị maka iji mmepe ọ bụghị maka mmepụta.
```
npm i --save-dev parcel
```
Wụnye Bootstrap. Ugbu a, anyị nwere ike ịwụnye Bootstrap. Anyị ga-etinyekwa Popper ebe ọ bụ na mwụda anyị, popovers, na ndụmọdụ ngwaọrụ dabere na ya maka ọnọdụ ha. Ọ bụrụ na ị naghị eme atụmatụ iji ihe ndị ahụ, ị nwere ike hapụ Popper ebe a.
```
npm i --save bootstrap @popperjs/core
```

Ugbu a anyị nwere ihe ndabere niile dị mkpa arụnyere, anyị nwere ike ịrụ ọrụ na-emepụta faịlụ ọrụ na ibubata Bootstrap.

Usoro oru ngo

Anyị emepụtala my-projectfolda ahụ wee malite npm. Ugbu a, anyị ga- srcekepụtakwa folda anyị, ụdị mpempe akwụkwọ na faịlụ Javascript iji mechaa usoro ọrụ ahụ. Gbaa ihe ndị a site na my-project, ma ọ bụ jiri aka mepụta folda na nhazi faịlụ egosiri n'okpuru.

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

Mgbe ịmechara, ọrụ gị zuru oke kwesịrị ịdị ka nke a:

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

N'oge a, ihe niile dị n'ebe kwesịrị ekwesị, mana Parcel chọrọ ibe HTML na npm script iji malite ihe nkesa anyị.

Hazie ngwugwu

Site na etinyere ihe ndabere yana folda ọrụ anyị dị njikere ka anyị bido koodu, anyị nwere ike hazie Parcel ugbu a wee rụọ ọrụ anyị na mpaghara. Parcel n'onwe ya achọghị faịlụ nhazi site na imewe, mana anyị chọrọ edemede npm yana faịlụ HTML iji malite sava anyị.

Dejupụta src/index.htmlfaịlụ ahụ. Ngwugwu chọrọ ibe iji sụgharịa, yabụ anyị na-eji index.htmlibe anyị hazie ụfọdụ HTML bụ isi, gụnyere faịlụ CSS na Javascript anyị.
```
<!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>
```
Anyị na-etinye ntakịrị ụdị Bootstrap ebe a div class="container"ka <button>anyị wee hụ mgbe Webpack bujuru CSS Bootstrap.

Parcel ga-achọpụta ozugbo na anyị na-eji Sass wee wụnye ngwa mgbakwunye Sass Parcel iji kwado ya. Otú ọ dị, ọ bụrụ na-ịchọrọ, ị nwekwara ike iji aka na-agba ọsọ npm i --save-dev @parcel/transformer-sass.
Tinye npm script Parcel. Mepee package.jsonma tinye startedemede a na scriptsihe ahụ. Anyị ga-eji edemede a bido ihe nkesa mmepe Parcel anyị wee nye faịlụ HTML anyị mepụtara ka achịkọtachara ya na distndekọ.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
N'ikpeazụ, anyị nwere ike ịmalite Parcel. Site na my-projectfolda dị na ọdụ gị, mee ihe npm agbakwunyere ọhụrụ:
```
npm start
```

Na ngalaba na-esote na nke ikpeazụ na ntuziaka a, anyị ga-ebubata Bootstrap CSS na Javascript niile.

Bubata Bootstrap

Ịbubata Bootstrap n'ime Parcel chọrọ mbubata abụọ, otu n'ime anyị styles.scssna otu n'ime main.js.

Bubata CSS Bootstrap. Tinye ihe ndị a src/scss/styles.scsska ibubata isi mmalite Bootstrap Sass niile.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ị nwekwara ike ibubata ụdị anyị n'otu n'otu ma ọ bụrụ na ịchọrọ. Gụọ akwụkwọ mbubata Sass maka nkọwa.
Bubata Bootstrap JS. Tinye ihe ndị a src/js/main.jska ibubata Bootstrap JS niile. A ga-ebubata popper na-akpaghị aka site na Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Ị nwekwara ike ibubata plugins Javascript n'otu n'otu ka ọ dị mkpa iji dobe nha ngwugwu ala:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Gụọ docs Javascript anyị maka ozi ndị ọzọ gbasara otu esi eji plugins Bootstrap.
I mechaala! 🎉 Site na isi mmalite Bootstrap Sass na JS zuru ezu, ihe nkesa mmepe mpaghara gị kwesịrị ịdị ugbu a ka nke a.

Ugbu a ị nwere ike ịmalite ịgbakwunye ngwa Bootstrap ọ bụla ịchọrọ iji. Jide n'aka na ị ga- elele ọrụ ihe atụ Parcel zuru ezu maka otu esi etinye Sass omenala agbakwunyere wee bulie ihe owuwu gị site na ibubata naanị akụkụ Bootstrap's CSS na JS nke ịchọrọ.

Hụ ihe na-adịghị mma ma ọ bụ nke merela ebe a? Biko mepee esemokwu na GitHub . Achọrọ enyemaka nchọpụta nsogbu? Chọọ ma ọ bụ malite mkparịta ụka na GitHub.