Bootstrap & parsail

An iùl oifigeil air mar as urrainn dhut CSS agus JavaScript Bootstrap a thoirt a-steach agus a phasgadh sa phròiseact agad a’ cleachdadh Parcel.

Air an duilleig seo

A bheil thu airson leum chun deireadh? Luchdaich sìos an còd stòr agus an demo obrach airson an iùl seo bhon stòr twbs / samples . Faodaidh tu cuideachd an eisimpleir fhosgladh ann an StackBlitz ach gun a ruith a chionn 's nach eil Parcel a' faighinn taic an sin an-dràsta.

Suidhich

Tha sinn a’ togail pròiseact parsailean le Bootstrap bhon fhìor thoiseach, agus mar sin tha cuid de ro-ghoireasan ann agus ceumannan air thoiseach mus urrainn dhuinn tòiseachadh dha-rìribh. Tha an iùl seo ag iarraidh gum bi Node.js agad air a chuir a-steach agus beagan eòlais air a’ cheann-uidhe.

Cruthaich pasgan pròiseict agus cuir air dòigh npm. Cruthaichidh sinn am my-projectpasgan agus tòisichidh sinn npm leis an -yargamaid gus nach cuir sinn na ceistean eadar-ghnìomhach oirnn uile.
```
mkdir my-project && cd my-project
npm init -y
```
Stàlaich Parcel. Eu-coltach ris an stiùireadh Webpack againn, chan eil ach aon eisimeileachd air inneal togail an seo. Cuiridh parsail cruth-atharraichean cànain gu fèin-ghluasadach (mar Sass) mar a lorgas e iad. Bidh sinn a’ cleachdadh --save-deva bhith a’ comharrachadh nach eil an eisimeileachd seo ach airson cleachdadh leasachaidh agus chan ann airson cinneasachadh.
```
npm i --save-dev parcel
```
Stàlaich Bootstrap. A-nis is urrainn dhuinn Bootstrap a stàladh. Stàlaichidh sinn Popper cuideachd leis gu bheil na dropdowns, popovers, agus molaidhean innealan againn an urra ris airson an suidheachadh. Mura h-eil thu an dùil na co-phàirtean sin a chleachdadh, faodaidh tu Popper fhàgail an seo.
```
npm i --save bootstrap @popperjs/core
```

A-nis gu bheil a h-uile eisimeileachd riatanach againn air a chuir a-steach, is urrainn dhuinn faighinn gu obair a’ cruthachadh faidhlichean a ’phròiseict agus a’ toirt a-steach Bootstrap.

Structar pròiseict

Tha sinn air am my-projectpasgan a chruthachadh mu thràth agus air tòiseachadh npm. A-nis cruthaichidh sinn ar srcpasgan, duilleag stoidhle, agus faidhle JavaScript gus structar a’ phròiseict a thoirt gu crìch. Ruith na leanas bho my-project, no cruthaich le làimh am pasgan agus an structar faidhle a chithear gu h-ìosal.

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

Nuair a bhios tu deiseil, bu chòir don phròiseact iomlan agad coimhead mar seo:

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

Aig an ìre seo, tha a h-uile dad san àite cheart, ach feumaidh Parcel duilleag HTML agus sgriobt npm gus ar frithealaiche a thòiseachadh.

Dèan rèiteachadh air parsail

Le eisimeileachd air a chuir a-steach agus am pasgan pròiseict againn deiseil airson tòiseachadh air còdadh, is urrainn dhuinn a-nis Parsel a rèiteachadh agus ar pròiseact a ruith gu h-ionadail. Chan fheum parsail fhèin faidhle rèiteachaidh sam bith a rèir dealbhadh, ach tha feum againn air sgriobt npm agus faidhle HTML gus ar frithealaiche a thòiseachadh.

Lìon a-steach am src/index.htmlfaidhle. Feumaidh parsail duilleag airson a thoirt seachad, agus mar sin bidh sinn a’ cleachdadh ar index.htmlduilleag gus HTML bunaiteach a stèidheachadh, a’ toirt a-steach na faidhlichean CSS agus JavaScript againn.
```
<!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>
```
Tha sinn a’ toirt a-steach beagan de stoidhle Bootstrap an seo leis an div class="container"agus <button>gus am faic sinn cuin a bhios CSS Bootstrap air a luchdachadh le Webpack.

Lorgaidh parsail gu fèin-ghluasadach gu bheil sinn a’ cleachdadh Sass agus stàlaichidh sinn am plugan Sass Parcel gus taic a thoirt dha. Ach, ma thogras tu, faodaidh tu cuideachd ruith le làimh npm i --save-dev @parcel/transformer-sass.
Cuir ris na sgriobtaichean Parcel npm. Fosgail an package.jsonagus cuir an startsgriobt a leanas ris an scriptsnì. Cleachdaidh sinn an sgriobt seo gus ar frithealaiche leasachaidh parsailean a thòiseachadh agus am faidhle HTML a chruthaich sinn a thoirt seachad às deidh dha a bhith air a chur ri chèile san disteòlaire.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Agus mu dheireadh, is urrainn dhuinn Parcel a thòiseachadh. Bhon my-projectphasgan sa cheann-uidhe agad, ruith an sgriobt npm a tha air ùr chur ris:
```
npm start
```

Anns an ath earrann agus an earrann mu dheireadh den stiùireadh seo, bheir sinn a-steach CSS agus JavaScript aig Bootstrap gu lèir.

Cuir a-steach Bootstrap

Feumaidh toirt a-steach Bootstrap a-steach don pharsail dà in-mhalairt, aon a-steach styles.scssdon fhaidhle main.js.

Cuir a-steach CSS Bootstrap. Cuir na leanas ris src/scss/styles.scssgus an stòr Bootstrap gu lèir a thoirt a-steach Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Faodaidh tu cuideachd na duilleagan stoidhle againn a thoirt a-steach leotha fhèin ma thogras tu. Leugh na docaichean in-mhalairt Sass againn airson mion-fhiosrachadh.
Cuir a-steach Bootstrap's JS. Cuir na leanas ris src/js/main.jsgus a h-uile gin de Bootstrap JS a thoirt a-steach. Thèid Popper a thoirt a-steach gu fèin-ghluasadach tro Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Faodaidh tu cuideachd plugins JavaScript a thoirt a-steach leotha fhèin mar a dh ’fheumar gus meudan pasgan a chumail sìos:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Leugh na docaichean JavaScript againn airson tuilleadh fiosrachaidh mu mar a chleachdas tu plugins Bootstrap.
Agus tha thu deiseil! 🎉 Le stòr Bootstrap Sass agus JS làn luchdaichte, bu chòir don t-seirbheisiche leasachaidh ionadail agad a-nis coimhead mar seo.

A-nis faodaidh tu tòiseachadh air co-phàirtean Bootstrap sam bith a tha thu airson a chleachdadh a chuir ris. Dèan cinnteach gun toir thu sùil air a’ phròiseact eisimpleir Parcel iomlan airson mar a bheir thu a-steach Sass àbhaisteach a bharrachd agus an togail agad a bharrachadh le bhith a’ toirt a-steach dìreach na pàirtean de CSS agus JS aig Bootstrap a tha a dhìth ort.

Am faic thu rudeigin ceàrr no seann-fhasanta an seo? Feuch an fosgail thu cùis air GitHub . A bheil feum agad air cuideachadh gus fuasgladh fhaighinn air duilgheadasan? Rannsaich no tòisich còmhradh air GitHub.