Bootstrap & Parcel

Cov lus qhia tseem ceeb rau kev suav nrog thiab ntim Bootstrap's CSS thiab JavaScript hauv koj qhov project siv Parcel.

Ntawm nplooj ntawv no

Xav hla mus rau qhov kawg? Download the source code and working demo for this guide from the twbs/example repository . Koj tuaj yeem qhib qhov piv txwv hauv StackBlitz tab sis tsis khiav nws vim tias Parcel tsis muaj kev txhawb nqa tam sim no.

Teeb tsa

Peb tab tom tsim ib txoj haujlwm Parcel nrog Bootstrap los ntawm kos, yog li muaj qee qhov yuav tsum tau ua ua ntej thiab nce qib ua ntej peb tuaj yeem pib tiag tiag. Cov lus qhia no xav kom koj muaj Node.js ntsia thiab qee qhov kev paub nrog lub davhlau ya nyob twg.

Tsim ib qhov project folder thiab teeb npm. Peb mam li tsim cov my-projectntawv tais ceev tseg thiab pib npm nrog cov -ylus sib cav kom tsis txhob nug peb tag nrho cov lus nug sib tham.
```
mkdir my-project && cd my-project
npm init -y
```
Nruab Parcel. Tsis zoo li peb phau ntawv qhia Webpack, tsuas muaj ib qho kev tsim cov cuab yeej nyob ntawm no. Parcel yuav cia li nruab cov lus hloov pauv (xws li Sass) raws li nws pom lawv. Peb siv --save-devlos qhia tias qhov kev cia siab no tsuas yog siv rau kev txhim kho thiab tsis yog rau kev tsim khoom.
```
npm i --save-dev parcel
```
Nruab Bootstrap. Tam sim no peb tuaj yeem nruab Bootstrap. Peb tseem yuav nruab Popper txij li peb qhov kev poob qis, popovers, thiab cov lus qhia nyob ntawm nws rau lawv qhov chaw. Yog tias koj tsis npaj siv cov khoom no, koj tuaj yeem tshem tawm Popper ntawm no.
```
npm i --save bootstrap @popperjs/core
```

Tam sim no peb muaj tag nrho cov kev vam khom tsim nyog tau teeb tsa, peb tuaj yeem ua haujlwm tsim cov ntaub ntawv project thiab import Bootstrap.

Qhov project qauv

Peb twb tau tsim cov my-projectntawv tais ceev tseg thiab pib npm. Tam sim no peb tseem yuav tsim peb cov srcntawv tais ceev tseg, stylesheet, thiab JavaScript cov ntaub ntawv txhawm rau nthuav tawm cov qauv tsim. Khiav cov hauv qab no los ntawm my-project, lossis manually tsim cov ntawv tais ceev tseg thiab cov qauv ntaub ntawv qhia hauv qab no.

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

Thaum koj ua tiav, koj qhov project tiav yuav tsum zoo li no:

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

Lub sijhawm no, txhua yam nyob hauv qhov chaw, tab sis Parcel xav tau nplooj ntawv HTML thiab npm tsab ntawv los pib peb lub server.

Configure Parcel

Nrog kev vam khom nruab thiab peb qhov project folder npaj rau peb pib coding, tam sim no peb tuaj yeem teeb tsa Parcel thiab khiav peb qhov project hauv zos. Parcel nws tus kheej yuav tsum tsis muaj cov ntaub ntawv teeb tsa los ntawm kev tsim, tab sis peb xav tau npm tsab ntawv thiab cov ntaub ntawv HTML los pib peb lub server.

Sau rau hauv cov src/index.htmlntaub ntawv. Parcel xav tau ib nplooj ntawv los ua, yog li peb siv peb index.htmlnplooj ntawv los teeb tsa qee cov HTML yooj yim, suav nrog peb cov ntaub ntawv CSS thiab 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>
```
Peb tab tom suav nrog me ntsis ntawm Bootstrap styling ntawm no nrog rau div class="container"thiab <button>kom peb pom thaum Bootstrap's CSS yog loaded los ntawm Webpack.

Parcel yuav pom tias peb siv Sass thiab nruab Sass Parcel plugin los txhawb nws. Txawm li cas los xij, yog tias koj xav tau, koj tuaj yeem ua haujlwm manually npm i --save-dev @parcel/transformer-sass.
Ntxiv Parcel npm scripts. Qhib cov ntawv package.jsonthiab ntxiv cov startntawv hauv qab no rau cov scriptskhoom. Peb yuav siv tsab ntawv no los pib peb Parcel kev txhim kho server thiab xa cov ntaub ntawv HTML peb tsim tom qab nws tau muab tso ua ke rau hauv cov distnpe.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Thiab thaum kawg, peb tuaj yeem pib Parcel. Los ntawm cov my-projectntawv tais ceev tseg hauv koj lub davhlau ya nyob twg, khiav qhov tshiab npm tsab ntawv:
```
npm start
```

Hauv seem tom ntej thiab zaum kawg rau phau ntawv qhia no, peb yuav import tag nrho Bootstrap's CSS thiab JavaScript.

Ntshuam Bootstrap

Importing Bootstrap rau hauv Parcel yuav tsum muaj ob qho kev xa khoom, ib qho rau hauv peb styles.scssthiab ib qho rau hauv peb main.js.

Ntshuam Bootstrap's CSS. Ntxiv cov hauv qab no src/scss/styles.scssrau import tag nrho cov Bootstrap qhov chaw Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Koj tseem tuaj yeem import peb cov ntawv style ib tus zuj zus yog tias koj xav tau. Nyeem peb Sass import docs kom paub meej.
Ntshuam Bootstrap's JS. Ntxiv cov hauv qab no src/js/main.jsrau import tag nrho Bootstrap's JS. Popper yuav raug import los ntawm Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Koj tseem tuaj yeem import JavaScript plugins ib tus zuj zus raws li qhov xav tau los khaws cov pob ntau thiab tsawg:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Nyeem peb cov ntaub ntawv JavaScript kom paub ntau ntxiv txog kev siv Bootstrap's plugins.
Thiab koj ua tiav! 🎉 Nrog Bootstrap qhov chaw Sass thiab JS tag nrho loaded, koj lub zos kev loj hlob server yuav tsum tam sim no zoo li no.

Tam sim no koj tuaj yeem pib ntxiv ib qho Bootstrap Cheebtsam uas koj xav siv. Nco ntsoov xyuas qhov ua tiav Parcel piv txwv qhov project yuav ua li cas suav nrog kev cai Sass ntxiv thiab ua kom zoo dua koj tsim los ntawm kev xa cov khoom ntawm Bootstrap's CSS thiab JS uas koj xav tau.

Pom ib yam dab tsi tsis ncaj ncees lawm los yog tsis muaj hnub no? Thov qhib qhov teeb meem ntawm GitHub . Xav tau kev pab daws teeb meem? Nrhiav lossis pib sib tham ntawm GitHub.