Bootstrap & Parcel

Le ta'iala aloa'ia mo le fa'aaofia ma fa'apipi'i le Bootstrap's CSS ma le JavaScript i lau poloketi e fa'aaoga ai le Parcel.

I luga o lenei itulau

E te manaʻo e faaseʻe i le iuga? La'u mai le code source ma le demo galue mo lenei ta'iala mai le twbs/examples repository . E mafai fo'i ona e tatalaina le fa'ata'ita'iga ile StackBlitz ae aua le ta'avale ona e le'o lagolagoina le Parcel ile taimi nei.

Seti

O lo'o matou fauina se Poloketi Poloketi ma Bootstrap mai le amataga, o lea e iai ni mea e mana'omia muamua ma fa'asaga i luma a'o le'i mafai ona amata. O lenei taʻiala e manaʻomia oe e faʻapipiʻi Node.js ma faʻamasani i le laina.

Fausia se faila poloketi ma seti npm. Matou te fatuina le my-projectfaila ma amata le npm ma le -yfinauga e aloese ai mai le fesili mai ia i matou uma fesili fegalegaleai.
```
mkdir my-project && cd my-project
npm init -y
```
Fa'apipi'i Parcel. E le pei o la matou Webpack guide, e na'o le tasi le mea faigaluega fa'alagolago iinei. Ole Parcel ole a otometi lava ona fa'apipi'i suiga ole gagana (pei o Sass) pe a iloa. Matou te faʻaaogaina --save-deve faʻamaonia ai o lenei faʻalagolago e naʻo le faʻaogaina o le atinaʻe ae le o le gaosiga.
```
npm i --save-dev parcel
```
Fa'apipi'i le Bootstrap. O lea e mafai ona matou faʻapipiʻi Bootstrap. Matou te faʻapipiʻi foi Popper talu ai o matou pa'ū, popovers, ma meafaigaluega e faʻalagolago i ai mo latou tulaga. Afai e te le fuafua i le faʻaaogaina o na vaega, e mafai ona e aveese Popper iinei.
```
npm i --save bootstrap @popperjs/core
```

I le taimi nei ua uma ona faʻapipiʻiina mea faʻalagolago, e mafai ona matou galulue i le fausiaina o faila faila ma le faʻaulufaleina mai o Bootstrap.

Fa'atulagaina o le poloketi

Ua uma ona matou fatuina le my-projectfaila ma amataina npm. O lea o le a matou faia foi la matou srcfaila, sitaili, ma le faila JavaScript e faʻataʻamilo ai le fausaga o le poloketi. Fa'agasolo mea nei mai le my-project, po'o le faia ma le lima le faila ma le faila faila o lo'o fa'aalia i lalo.

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

A mae'a, e tatau ona fa'apenei lau galuega atoa:

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

I le taimi nei, o mea uma o loʻo i le nofoaga saʻo, ae manaʻomia e Parcel se itulau HTML ma le npm script e amata ai la matou 'auʻaunaga.

Fa'atulaga le Fa'asoa

Faatasi ai ma fa'alagolago ua fa'apipi'iina ma ua sauni le matou faila o le poloketi mo i matou e amata ai le coding, ua mafai nei ona matou fa'atulagaina le Parcel ma fa'atautaia la matou poloketi i le lotoifale. E le manaʻomia e le Parcel ia se faila faʻatulagaina e ala i le mamanu, ae matou te manaʻomia se npm script ma se HTML faila e amata ai la matou server.

Faatumu le src/index.htmlfaila. E mana'omia e Parcel se itulau e fa'aalia, o lea matou te fa'aoga ai la matou index.htmlitulau e fa'atulaga ai nisi HTML fa'avae, e aofia ai a matou faila CSS ma 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>
```
O loʻo matou faʻapipiʻiina sina sitaili Bootstrap iinei ma le div class="container"ma <button>ina ia matou vaʻai pe a utaina le CSS Bootstrap e Webpack.

E otometi lava ona iloa e Parcel o lo'o matou fa'aogaina le Sass ma fa'apipi'i le Sass Parcel plugin e lagolago ai. Ae peitaʻi, afai e te manaʻo ai, e mafai foʻi ona e taʻavale ma le lima npm i --save-dev @parcel/transformer-sass.
Fa'aopoopo le Parcel npm scripts. Tatala le package.jsonma faaopoopo le startmau lea i le scriptsmea faitino. O le a matou fa'aogaina le tusitusiga lea e amata ai le matou Parcel development server ma tu'uina atu le faila HTML na matou faia pe a uma ona tu'ufa'atasia i totonu o le distlisi.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Ma le mea mulimuli, e mafai ona tatou amata Parcel. Mai le my-projectfaʻailoga i lau faʻailoga, faʻataʻitaʻi le tusi fou fou npm:
```
npm start
```

I le isi vaega mulimuli ma le vaega mulimuli i lenei taʻiala, matou te faʻaulufaleina uma mai le Bootstrap CSS ma le JavaScript.

Fa'aulufale mai Bootstrap

O le fa'aulufaleina mai o Bootstrap i totonu o le Parcel e mana'omia ai ni fa'aulufale se lua, tasi i totonu styles.scssma le tasi i totonu o la tatou main.js.

Auina mai le CSS Bootstrap. Fa'aopoopo mea nei i src/scss/styles.scssle fa'aulufale uma mai o le puna a Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
E mafai fo'i ona e fa'aulufale mai a matou sitaili ta'itasi pe a e mana'o ai. Faitau a matou pepa fa'aulufale mai Sass mo fa'amatalaga.
Auina mai le Bootstrap's JS. Fa'aopoopo mea nei src/js/main.jsile fa'aulufale uma mai o Bootstrap's JS. Popper o le a otometi lava ona faaulufale mai e ala i Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
E mafai fo'i ona e fa'aulufale mai fa'apipi'i JavaScript ta'ito'atasi pe a mana'omia e fa'atumauina i lalo le lapo'a:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Faitau a matou JavaScript docs mo nisi faʻamatalaga ile faʻaogaina o plugini a Bootstrap.
Ma ua uma oe! 🎉 Faatasi ai ma le puna a Bootstrap Sass ma JS ua uma ona utaina, ua tatau nei ona foliga faʻapea lau 'auʻaunaga atinaʻe i le lotoifale.

Ole taimi nei e mafai ona e amata fa'aopoopo so'o se vaega Bootstrap e te mana'o e fa'aoga. Ia mautinoa e siaki le poloketi faʻataʻitaʻiga atoa o le Parcel mo le faʻapipiʻiina o Sass tu ma aga faʻaopoopo ma faʻalelei lau faufale e ala i le faʻaulufaleina mai na o vaega ole Bootstrap's CSS ma JS e te manaʻomia.

Va'ai i se mea sese pe tuai iinei? Faamolemole tatala se mataupu ile GitHub . Manaomia se fesoasoani e foia ai faafitauli? Su'e pe amata se talanoaga ile GitHub.