Bootstrap a Pharsel

Y canllaw swyddogol ar sut i gynnwys a bwndelu CSS a JavaScript Bootstrap yn eich prosiect gan ddefnyddio Parcel.

Ar y dudalen hon

Eisiau neidio i'r diwedd? Lawrlwythwch y cod ffynhonnell a'r demo gweithredol ar gyfer y canllaw hwn o'r ystorfa twbs/enghreifftiau . Gallwch hefyd agor yr enghraifft yn StackBlitz ond nid ei redeg oherwydd nid yw Parcel yn cael ei gefnogi yno ar hyn o bryd.

Gosod

Rydyn ni'n adeiladu prosiect Parsel gyda Bootstrap o'r newydd, felly mae rhai rhagofynion a chamau ymlaen cyn y gallwn ni ddechrau o ddifrif. Mae'r canllaw hwn yn ei gwneud yn ofynnol i chi gael Node.js wedi'i osod a rhywfaint o gyfarwydd â'r derfynell.

Creu ffolder prosiect a gosod npm. Byddwn yn creu'r my-projectffolder ac yn cychwyn npm gyda'r -yddadl i osgoi gofyn y cwestiynau rhyngweithiol i ni i gyd.
```
mkdir my-project && cd my-project
npm init -y
```
Gosod Parsel. Yn wahanol i'n canllaw Webpack, dim ond dibyniaeth ar offer adeiladu sengl sydd yma. Bydd Parsel yn gosod trawsnewidyddion iaith yn awtomatig (fel Sass) wrth iddo eu canfod. Rydym yn defnyddio --save-devi nodi bod y ddibyniaeth hon ar gyfer defnydd datblygu yn unig ac nid ar gyfer cynhyrchu.
```
npm i --save-dev parcel
```
Gosod Bootstrap. Nawr gallwn osod Bootstrap. Byddwn hefyd yn gosod Popper gan fod ein cwymplenni, popovers, a chynghorion offer yn dibynnu arno ar gyfer eu lleoli. Os nad ydych yn bwriadu defnyddio'r cydrannau hynny, gallwch hepgor Popper yma.
```
npm i --save bootstrap @popperjs/core
```

Nawr bod gennym yr holl ddibyniaethau angenrheidiol wedi'u gosod, gallwn gyrraedd y gwaith o greu'r ffeiliau prosiect a mewnforio Bootstrap.

Strwythur y prosiect

Rydym eisoes wedi creu'r my-projectffolder ac wedi cychwyn npm. Nawr byddwn hefyd yn creu ein srcffolder, taflen arddull, a ffeil JavaScript i dalgrynnu strwythur y prosiect. Rhedwch y canlynol o my-project, neu crëwch y ffolder a'r strwythur ffeil a ddangosir isod â llaw.

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

Pan fyddwch wedi gorffen, dylai eich prosiect cyflawn edrych fel hyn:

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

Ar y pwynt hwn, mae popeth yn y lle iawn, ond mae Parcel angen tudalen HTML a sgript npm i gychwyn ein gweinydd.

Ffurfweddu Parsel

Gyda dibyniaethau wedi'u gosod a'n ffolder prosiect yn barod i ni ddechrau codio, gallwn nawr ffurfweddu Parsel a rhedeg ein prosiect yn lleol. Nid oes angen unrhyw ffeil ffurfweddu yn ôl dyluniad parsel ei hun, ond mae angen sgript npm a ffeil HTML arnom i gychwyn ein gweinydd.

Llenwch y src/index.htmlffeil. Mae angen tudalen ar Parsel i'w rendro, felly rydym yn defnyddio ein index.htmltudalen i sefydlu rhai HTML sylfaenol, gan gynnwys ein ffeiliau CSS a JavaScript.

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

Rydyn ni'n cynnwys ychydig o steilio Bootstrap yma gyda'r div class="container"ac <button>fel ein bod ni'n gweld pan fydd CSS Bootstrap yn cael ei lwytho gan Webpack.

Bydd Parsel yn canfod yn awtomatig ein bod yn defnyddio Sass ac yn gosod yr ategyn Sass Parcel i'w gefnogi. Fodd bynnag, os dymunwch, gallwch hefyd redeg npm i --save-dev @parcel/transformer-sass.

Ychwanegu'r sgriptiau Parsel npm. Agorwch y sgript ac ychwanegwch y sgript package.jsonganlynol at y gwrthrych. Byddwn yn defnyddio'r sgript hon i gychwyn ein gweinydd datblygu Parseli a gwneud y ffeil HTML a grëwyd gennym ar ôl iddi gael ei chrynhoi yn y cyfeiriadur.startscriptsdist
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Ac yn olaf, gallwn ddechrau Parcel. O'r my-projectffolder yn eich terfynell, rhedwch y sgript npm sydd newydd ei ychwanegu:
```
npm start
```

Yn yr adran nesaf ac olaf i'r canllaw hwn, byddwn yn mewnforio holl CSS a JavaScript Bootstrap.

Mewnforio Bootstrap

Mae angen dau fewnforiad i fewnforio Bootstrap i Barsel, un styles.scssi'n main.js.

Mewnforio CSS Bootstrap. Ychwanegwch y canlynol i src/scss/styles.scssfewngludo holl ffynhonnell Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Gallwch hefyd fewnforio ein dalennau arddull yn unigol os dymunwch. Darllenwch ein dogfennau mewnforio Sass am fanylion.
Mewnforio Bootstrap's JS. Ychwanegwch y canlynol i src/js/main.jsfewngludo holl JS Bootstrap. Bydd popper yn cael ei fewnforio yn awtomatig trwy Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Gallwch hefyd fewnforio ategion JavaScript yn unigol yn ôl yr angen i gadw meintiau bwndel i lawr:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Darllenwch ein dogfennau JavaScript i gael rhagor o wybodaeth am sut i ddefnyddio ategion Bootstrap.
Ac rydych chi wedi gorffen! 🎉 Gyda ffynhonnell Bootstrap, Sass a JS wedi'i llwytho'n llawn, dylai eich gweinydd datblygu lleol edrych fel hyn nawr.

Nawr gallwch chi ddechrau ychwanegu unrhyw gydrannau Bootstrap rydych chi am eu defnyddio. Gwnewch yn siŵr eich bod yn edrych ar y prosiect enghreifftiol Parsel cyflawn i weld sut i gynnwys Sass personol ychwanegol a gwneud y gorau o'ch adeiladwaith trwy fewnforio dim ond y rhannau o CSS a JS Bootstrap sydd eu hangen arnoch chi.

Gweld rhywbeth o'i le neu wedi dyddio yma? Agorwch broblem ar GitHub . Angen help i ddatrys problemau? Chwiliwch neu dechreuwch drafodaeth ar GitHub.