Bootstrap & ʻāpana

ʻO ke alakaʻi alakaʻi no ka hoʻokomo ʻana a me ka hoʻopili ʻana i kā Bootstrap's CSS a me JavaScript i kāu papahana me ka hoʻohana ʻana iā Parcel.

Ma kēia ʻaoʻao

Makemake ʻoe e lele i ka hopena? Hoʻoiho i ke kumu kumu a me ka demo hana no kēia alakaʻi mai ka waihona twbs/examples . Hiki iā ʻoe ke wehe i ka laʻana ma StackBlitz akā ʻaʻole holo ia no ka mea ʻaʻole kākoʻo ʻia ʻo Parcel ma laila.

Hoʻonoho

Ke kūkulu nei mākou i kahi papahana Parcel me Bootstrap mai ka wā ʻōpala, no laila aia kekahi mau mea e pono ai a ma mua o ka hiki ke hoʻomaka. Pono kēia alakaʻi iā ʻoe e hoʻokomo iā Node.js a me kahi kamaʻāina me ka terminal.

E hana i kahi waihona papahana a hoʻonohonoho i ka npm. E hana mākou i ka my-projectwaihona a hoʻomaka i ka npm me ka -yhoʻopaʻapaʻa e pale aku i ka nīnau ʻana iā mākou i nā nīnau pili āpau.
```
mkdir my-project && cd my-project
npm init -y
```
E hoʻouka i ka ʻāpana. ʻAʻole like i kā mākou alakaʻi Webpack, hoʻokahi wale nō mea hana hilinaʻi ma aneʻi. E hoʻokomo ʻokoʻa ʻo Parcel i nā mea hoʻololi ʻōlelo (e like me Sass) i kona ʻike ʻana iā lākou. Hoʻohana mākou --save-deve hōʻailona i kēia hilinaʻi no ka hoʻohana hoʻomohala wale ʻana a ʻaʻole no ka hana ʻana.
```
npm i --save-dev parcel
```
E hoʻouka i ka Bootstrap. I kēia manawa hiki iā mākou ke hoʻokomo iā Bootstrap. E hoʻokomo pū mākou iā Popper mai ka hilinaʻi ʻana o kā mākou dropdowns, popovers, a me nā hāmeʻa no ko lākou kūlana. Inā ʻaʻole ʻoe e hoʻolālā i ka hoʻohana ʻana i kēlā mau ʻāpana, hiki iā ʻoe ke haʻalele iā Popper ma aneʻi.
```
npm i --save bootstrap @popperjs/core
```

I kēia manawa ua hoʻokomo ʻia nā mea hilinaʻi a pau, hiki iā mākou ke hana i ka hana ʻana i nā faila papahana a lawe mai iā Bootstrap.

Papahana papahana

Ua hana mua mākou i ka my-projectwaihona a hoʻomaka i ka npm. I kēia manawa, hana mākou i kā mākou srcwaihona, stylesheet, a me JavaScript file e hoʻopuni ai i ke ʻano o ka papahana. E holo i kēia mai my-project, a i ʻole e hana lima i ka waihona a me ka hoʻolālā waihona i hōʻike ʻia ma lalo nei.

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

Ke pau ʻoe, pono kāu papahana piha e like me kēia:

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

I kēia manawa, aia nā mea āpau ma kahi kūpono, akā pono ʻo Parcel i kahi palapala HTML a me ka script npm e hoʻomaka i kā mākou kikowaena.

E hoʻonohonoho i ka ʻāpana

Me nā mea hilinaʻi i kau ʻia a mākaukau kā mākou waihona papahana no mākou e hoʻomaka i ka coding, hiki iā mākou ke hoʻonohonoho iā Parcel a holo i kā mākou papahana ma ka ʻāina. ʻAʻole pono ʻo Parcel ponoʻī i kahi faila hoʻonohonoho ma ka hoʻolālā ʻana, akā pono mākou i kahi palapala npm a me kahi faila HTML e hoʻomaka ai i kā mākou kikowaena.

E hoʻopiha i ka src/index.htmlfaila. Pono ʻo Parcel i kahi ʻaoʻao e hāʻawi ai, no laila hoʻohana mākou i kā mākou index.htmlʻaoʻao e hoʻonohonoho i kekahi HTML maʻamau, me kā mākou CSS a me nā faila 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>
```
Ke hoʻokomo nei mākou i kahi mea liʻiliʻi o Bootstrap styling ma aneʻi me ka div class="container"a <button>no laila mākou e ʻike ai i ka wā e hoʻouka ʻia ai kā Bootstrap CSS e Webpack.

E ʻike koke ʻo Parcel e hoʻohana ana mākou iā Sass a hoʻokomo i ka plugin Sass Parcel e kākoʻo iā ia. Eia naʻe, inā makemake ʻoe, hiki iā ʻoe ke holo me ka lima npm i --save-dev @parcel/transformer-sass.
Hoʻohui i nā palapala Parcel npm. E wehe i ka package.jsona hoʻohui i kēia startpalapala i ka scriptsmea. E hoʻohana mākou i kēia ʻatikala e hoʻomaka i kā mākou kikowaena hoʻomohala Parcel a hāʻawi i ka faila HTML a mākou i hana ai ma hope o ka hōʻuluʻulu ʻia ʻana i loko o ka distpapa kuhikuhi.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
A ʻo ka hope, hiki iā mākou ke hoʻomaka iā Parcel. Mai ka my-projectwaihona i kāu kikowaena, e holo i ka hōʻailona npm hou:
```
npm start
```

Ma ka ʻāpana aʻe a me ka hope o kēia alakaʻi, e hoʻokomo mākou i nā CSS a me JavaScript a Bootstrap.

Lawe mai i Bootstrap

ʻO ka lawe ʻana mai i ka Bootstrap i loko o Parcel e koi i ʻelua mau mea lawe mai, hoʻokahi i kā mākou styles.scssa hoʻokahi i kā mākou main.js.

E hoʻokomo i kā Bootstrap CSS. E hoʻohui i kēia src/scss/styles.scsse hoʻokomo i nā kumu a pau o Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Hiki nō hoʻi iā ʻoe ke hoʻokomo i kā mākou stylesheets pākahi inā makemake ʻoe. E heluhelu i kā mākou Sass import docs no nā kikoʻī.
E lawe mai i kā Bootstrap JS. E hoʻohui i kēia src/js/main.jse hoʻokomo i nā JS a pau o Bootstrap. E lawe ʻia mai ʻo Popper ma o Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Hiki iā ʻoe ke hoʻokomo i nā plugins JavaScript i kēlā me kēia mea e pono ai e mālama i ka nui o ka pūpū:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
E heluhelu i kā mākou mau palapala JavaScript no ka ʻike hou aku e pili ana i ka hoʻohana ʻana i nā plugins Bootstrap.
A ua pau ʻoe! 🎉 Me ke kumu o Bootstrap Sass a me JS i hoʻopiha piha ʻia, pono ke ʻano o kāu kikowaena hoʻomohala kūloko e like me kēia.

I kēia manawa hiki iā ʻoe ke hoʻomaka e hoʻohui i nā ʻāpana Bootstrap āu e makemake ai e hoʻohana. E nānā pono i ka papahana hoʻohālike Parcel piha no ka hoʻokomo ʻana i nā Sass maʻamau a hoʻonui i kāu kūkulu ʻana ma ka lawe ʻana i nā ʻāpana o Bootstrap's CSS a me JS āu e pono ai.

E ʻike i kekahi mea hewa a i ʻole ka wā kahiko ma aneʻi? E ʻoluʻolu e wehe i kahi pilikia ma GitHub . Pono e kōkua i ka hoʻoponopono pilikia? Huli a hoʻomaka i kahi kūkākūkā ma GitHub.