Bootstrap & Parcel

Ko te aratohu whai mana mo te whakauru me te paihere i te CSS me te JavaScript a Bootstrap ki to kaupapa ma te whakamahi i te Parcel.

I tenei wharangi

Kei te pirangi koe ki te peke ki te mutunga? Tikiake i te waehere puna me te demo mahi mo tenei aratohu mai i te rehitatanga twbs/tauira . Ka taea hoki e koe te whakatuwhera i te tauira ki StackBlitz engari kaua e whakahaere na te mea kare a Parcel i te tautokona ki reira.

Tatūnga

Kei te hangahia e matou he kaupapa Parcel me Bootstrap mai i te timatanga, no reira kei reira etahi tikanga me nga kaupae o mua i mua i te tiimata. Ko tenei aratohu me whakauru koe i a Node.js me te mohio ki te tauranga.

Waihangahia he kōpaki kaupapa me te tatūnga npm. Ka hangahia e matou te my-projectkōpaki ka arawhiti i te npm me te -ytohenga kia kore ai e patai mai ki a matou nga patai tauwhitiwhiti katoa.
```
mkdir my-project && cd my-project
npm init -y
```
Tāuta Pūkete. Kaore i rite ki ta maatau aratohu Paetukutuku, kotahi noa te ti'aturi o te taputapu hanga i konei. Ka whakauruhia e Parcel nga huringa reo (penei i a Sass) ka kitea e ia. Ka whakamahia e matou --save-devki te tohu ko tenei whakawhirinaki mo te whakamahi whanaketanga anake, ehara mo te hanga.
```
npm i --save-dev parcel
```
Tāutahia te Bootstrap. Inaianei ka taea e taatau te whakauru Bootstrap. Ka whakauruhia ano e matou a Popper na te mea ka whakawhirinaki a maatau whakahekenga, pouvers, me nga aki taputapu mo o raatau tuunga. Mena kaore koe e whakaaro ki te whakamahi i aua waahanga, ka taea e koe te waiho Popper konei.
```
npm i --save bootstrap @popperjs/core
```

Inaianei kua whakauruhia e matou nga whakawhirinakitanga e tika ana, ka taea e matou te mahi ki te hanga i nga konae kaupapa me te kawemai i a Bootstrap.

Te hanganga kaupapa

Kua oti i a maatau te hanga i te my-projectkōpaki me te tiimata i te npm. Inaianei ka hanga ano e matou ta matou srckōpaki, pepa ahua, me te konae JavaScript hei whakaawhiwhi i te hanganga kaupapa. Whakahaerehia nga mea e whai ake nei mai i te my-project, te hanga a ringa ranei i te kōpaki me te hanganga konae kei raro nei.

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

Ina oti koe, me penei te ahua o to kaupapa:

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

I tenei wa, kei te waahi tika nga mea katoa, engari e hiahia ana a Parcel ki te wharangi HTML me te tuhinga npm hei tiimata i to maatau.

Whirihorahia te Parcel

I te mea kua whakauruhia nga whakawhirinakitanga me ta maatau kōpaki kaupapa kua reri mo tatou ki te timata ki te whakawaehere, ka taea e tatou te whirihora i te Parcel me te whakahaere i ta tatou kaupapa i te rohe. Karekau he konae whirihoranga ma te hoahoa, engari ka hiahia matou he tuhinga npm me tetahi konae HTML hei tiimata i to maatau.

Whakakiia te src/index.htmlkonae. Me whai wharangi a Parcel, no reira ka whakamahi matou i ta matou index.htmlwharangi ki te whakarite etahi HTML taketake, tae atu ki a matou konae CSS me 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>
```
Kei te whakaurua e matou he iti mo te ahua o Bootstrap ki konei me te div class="container"a <button>kia kite tatou i te wa e utaina ana a Bootstrap CSS e Webpack.

Ka kite aunoa a Parcel kei te whakamahi matou i a Sass ka whakauruhia te mono Sass Parcel hei tautoko. Heoi, ki te hiahia koe, ka taea hoki e koe te whakahaere a-ringa npm i --save-dev @parcel/transformer-sass.
Tāpirihia nga tuhinga Parcel npm. Whakatuwheratia te package.jsonka taapirihia te starttuhinga e whai ake nei ki te scriptsahanoa. Ka whakamahia e matou tenei tuhinga hei timata i ta matou tūmau whanaketanga Parcel me te whakaputa i te konae HTML i hangaia e matou i muri i te whakahiato ki te distraarangi.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Ka mutu, ka taea e tatou te timata Parcel. Mai i te my-projectkōpaki i roto i to tauranga, whakahaere i te tuhinga npm hou kua taapirihia:
```
npm start
```

I te waahanga o muri me te whakamutunga ki tenei aratohu, ka kawemai matou i nga CSS me JavaScript katoa a Bootstrap.

Kawemai Bootstrap

Ko te kawemai i te Bootstrap ki roto i te Parcel e rua nga kawemai, kotahi ki roto i a maatau styles.scssme tetahi ki roto i a maatau main.js.

Kawemai CSS's Bootstrap. Taapirihia nga mea e whai ake nei ki src/scss/styles.scsste kawemai i te puna katoa o Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ka taea hoki e koe te kawemai i a maatau pepa ahua takitahi ki te hiahia koe. Panuihia a maatau tuhinga kawemai a Sass mo nga taipitopito.
Kawemai a Bootstrap's JS. Tāpirihia nga mea e whai ake nei ki src/js/main.jste kawemai i nga JS katoa a Bootstrap. Ka kawemai aunoa a Popper ma Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Ka taea hoki e koe te kawemai i nga monomai JavaScript takitahi ina hiahiatia kia heke iho te rahi o te paihere:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Panuihia a maatau tuhinga JavaScript mo etahi atu korero mo te whakamahi i nga taputapu a Bootstrap.
A kua oti koe! 🎉 Na te puna a Bootstrap a Sass me JS kua utaina katoa, me penei te ahua o to tuumau whanaketanga o to rohe.

Ka taea e koe te tiimata ki te taapiri i nga waahanga Bootstrap e hiahia ana koe ki te whakamahi. Kia mahara ki te tirotiro i te kaupapa tauira Parcel katoa mo te whakauru i etahi atu ritenga Sass me te arotau i to hanga ma te kawemai i nga waahanga o Bootstrap's CSS me JS e hiahia ana koe.

Ka kite i tetahi mea he, kua tawhito ranei i konei? Whakatuwheratia he take ki GitHub . Me awhina ki te rapu raruraru? Rapua, timata ranei he korerorero mo GitHub.