Bootstrap & Pasɛl fɔ di wan dɛn

Di ɔfishal gayd fɔ aw fɔ inklud ɛn bɔnd Bootstrap in CSS ɛn JavaSkript insay yu prɔjek we yu de yuz Parcel.

Na dis pej

Yu want fɔ skip te yu rich di ɛnd? Daunlod di sɔs kɔd ɛn wok demo fɔ dis gayd frɔm di twbs/ɛgzampul ripɔsitɔri . Yu kin opin di ɛgzampul bak na StackBlitz bɔt nɔ rɔn am bikɔs Parcel nɔ de sɔpɔt de naw.

Put

Wi de bil wan Parcel projɛkt wit Bootstrap frɔm skrach, so sɔm prɛrikuls dɛn de ɛn ɔp frɔnt stɛp dɛn bifo wi kin rili bigin. Dis gayd nid fɔ mek yu gɛt Node.js instɔl ɛn sɔm familiyariti wit di tɛminal.

Krio wan projɛkt fɔlda ɛn sɛtup npm. Wi go mek di my-projectfɔlda ɛn initialize npm wit di -yargumɛnt fɔ mek i nɔ aks wi ɔl di intaraktiv kwɛstyɔn dɛn.
```
mkdir my-project && cd my-project
npm init -y
```
Instɔl Pasɛl. Nɔ lɛk wi Wɛbpak gayd, na wan bil tul dipɛnshɔn nɔmɔ de ya. Parcel go ɔtomɛtik instɔl langwej transfɔma dɛn (lɛk Sass) as i de detekt dɛn. Wi de yuz --save-devfɔ signal se dis dipɛnshɔn na fɔ divɛlɔpmɛnt yus nɔmɔ ɛn nɔto fɔ prodakshɔn.
```
npm i --save-dev parcel
```
Instɔl di Bootstrap. Naw wi kin instɔl Bootstrap. Wi go instɔl Popper bak bikɔs wi drɔpdɔwn, popovers, ɛn tultip dɛn dipen pan am fɔ dɛn pozishɔn. If yu nɔ plan fɔ yuz dɛn kɔmpɔnɛnt dɛn de, yu kin ɔmit Popper ya.
```
npm i --save bootstrap @popperjs/core
```

Naw we wi dɔn instɔl ɔl di dipɛnsin dɛn we wi nid fɔ instɔl, wi kin bigin fɔ wok fɔ mek di prɔjek fayl dɛn ɛn fɔ import Bootstrap.

Projekt strɔkchɔ

Wi don olredi kriet di my-projectfolda en initialize npm. Naw wi go mek wi srcfɔlda, staylshit, ɛn JavaSkript fayl bak fɔ rawnd di prɔjek strɔkchɔ. Rɔn di tin dɛn we de dɔŋ ya frɔm my-project, ɔ mek di fɔlda ɛn fayl strɔkchɔ we de dɔŋ ya wit yu an.

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

We yu dɔn, yu kɔmplit prɔjek fɔ tan lɛk dis:

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

Na dis tɛm, ɔltin de na di rayt ples, bɔt Parcel nid HTML pej ɛn npm skript fɔ stat wi sava.

Kɔnfigyut di Pasɛl

Wit dipɛnsin dɛn we dɛn dɔn instɔl ɛn wi prɔjek fɔlda rɛdi fɔ wi fɔ stat fɔ kɔd, wi kin kɔnfigyut Pasɛl naw ɛn rɔn wi prɔjek lokal wan. Pasɛl insɛf nɔ nid ɛni kɔnfigyushɔn fayl bay dizayn, bɔt wi nid wan npm skript ɛn wan HTML fayl fɔ stat wi sava.

Fil di src/index.htmlfayl insay. Parcel nid pej fɔ rɛnd, so wi de yuz wi index.htmlpej fɔ sɛt sɔm bɛsik HTML, inklud wi CSS ɛn JavaSkript fayl dɛn.

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

Wi de inklud smɔl smɔl Bootstrap stayl ya wit di div class="container"ɛn <button>so dat wi go si we Bootstrap in CSS de lod bay Webpack.

Parcel go otomatik detekt wi de yuz Sass ɛn instɔl di Sass Parcel plɔgin fɔ sɔpɔt am. Bɔt if yu want, yu kin yuz yu an fɔ rɔn bak npm i --save-dev @parcel/transformer-sass.

Ad di Parcel npm skript dɛn. Opin di package.jsonɛn ad di startskript we de dɔŋ ya to di scriptstin. Wi go yuz dis skript fɔ stat wi Parcel divɛlɔpmɛnt sava ɛn rɛnd di HTML fayl we wi mek afta dɛn dɔn kɔmpilayt am na di distdairektrɔ.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Ɛn fɔ dɔn, wi kin stat Pasɛl. Frɔm di my-projectfɔlda na yu tɛminal, rɔn da nyu npm skript de we dɛn dɔn ad:
```
npm start
```

Insay di nɛks ɛn las pat na dis gayd, wi go import ɔl di Bootstrap in CSS ɛn JavaSkript dɛn.

Impɔt bɔt di Bootstrap

Fɔ import Bootstrap insay Parcel nid fɔ import tu, wan insay wi styles.scssɛn wan insay wi main.js.

Impɔt di CSS fɔ Bootstrap. Ad di wan dɛn we de dɔŋ ya to src/scss/styles.scssfɔ import ɔl di Bootstrap in sɔs Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Yu kin impɔtɔt wi staylshit dɛn bak wan bay wan if yu want. Rid wi Sass import docs fɔ di ditel dɛn.
Impɔt Bootstrap in JS. Ad di wan dɛn we de dɔŋ ya to src/js/main.jsfɔ import ɔl di Bootstrap in JS dɛn. Popper go import otomatik tru Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Yu kin impɔtɔt JavaSkript plɔgin dɛn bak wan bay wan as nid de fɔ kip bɔndɛl saiz dɛn dɔŋ:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Rid wi JavaSkript dɔks fɔ no mɔ bɔt aw fɔ yuz Bootstrap in plɔgin dɛn.
Ɛn yu dɔn dɔn! 🎉 Wit Bootstrap in sos Sass en JS ful lod, yu lokal divelopment sava shud luk laik dis naw.

Naw yu kin stat fɔ ad ɛni Bootstrap kɔmpɔnɛnt we yu want fɔ yuz. Mek shɔ se yu chɛk di kɔmplit Parcel ɛgzampul projɛkt fɔ aw fɔ inklud ɔda kɔstɔm Sass ɛn ɔptimayz yu bild bay we yu import ɔl di pat dɛn na Bootstrap in CSS ɛn JS we yu nid.

Si sɔntin we rɔng ɔ we nɔ de igen ya? Duya opin wan isyu na GitHub . Nid ɛp fɔ sɔlv prɔblɛm dɛn? Sɔch ɔ stat fɔ tɔk bɔt na GitHub.