Bootstrap & Parcel

Itọsọna osise fun bi o ṣe le pẹlu ati dipọ Bootstrap's CSS ati JavaScript ninu iṣẹ akanṣe rẹ nipa lilo Parcel.

Lori iwe yi

Ṣe o fẹ lati fo si opin? Ṣe igbasilẹ koodu orisun ati demo iṣẹ fun itọsọna yii lati ibi ipamọ twbs/awọn apẹẹrẹ . O tun le ṣii apẹẹrẹ ni StackBlitz ṣugbọn ko ṣiṣẹ nitori Parcel ko ṣe atilẹyin lọwọlọwọ nibẹ.

Ṣeto

A n kọ iṣẹ akanṣe Parcel pẹlu Bootstrap lati ibere, nitorinaa diẹ ninu awọn ohun pataki wa ati awọn igbesẹ iwaju ṣaaju ki a to le bẹrẹ gaan. Itọsọna yii nilo ki o fi Node.js sori ẹrọ ati imọ diẹ pẹlu ebute naa.

Ṣẹda folda ise agbese ati iṣeto npm. A yoo ṣẹda my-projectfolda naa ki o bẹrẹ npm pẹlu -yariyanjiyan lati yago fun bibeere gbogbo awọn ibeere ibaraenisepo wa.
```
mkdir my-project && cd my-project
npm init -y
```
Fi sori ẹrọ Parcel. Ko dabi itọsọna Webpack wa, igbẹkẹle ohun elo ikọle ẹyọkan kan wa nibi. Parcel yoo fi awọn oluyipada ede sori ẹrọ laifọwọyi (bii Sass) bi o ṣe n ṣe awari wọn. A lo --save-devlati ṣe ifihan pe igbẹkẹle yii jẹ fun lilo idagbasoke nikan kii ṣe fun iṣelọpọ.
```
npm i --save-dev parcel
```
Fi Bootstrap sori ẹrọ. Bayi a le fi Bootstrap sori ẹrọ. A yoo tun fi Popper sori ẹrọ nitori awọn isọ silẹ wa, awọn agbejade, ati awọn imọran irinṣẹ da lori rẹ fun ipo wọn. Ti o ko ba gbero lori lilo awọn paati yẹn, o le fi Popper silẹ nibi.
```
npm i --save bootstrap @popperjs/core
```

Ni bayi ti a ti fi sori ẹrọ gbogbo awọn igbẹkẹle pataki, a le gba lati ṣiṣẹ ṣiṣẹda awọn faili iṣẹ akanṣe ati gbigbe Bootstrap wọle.

Ilana ise agbese

A ti ṣẹda my-projectfolda tẹlẹ ati ṣe ipilẹṣẹ npm. Ni bayi a yoo tun ṣẹda srcfolda wa, iwe aṣa, ati faili JavaScript lati yika eto iṣẹ akanṣe naa. Ṣiṣe awọn atẹle lati my-project, tabi pẹlu ọwọ ṣẹda folda ati ọna faili ti o han ni isalẹ.

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

Nigbati o ba ti pari, iṣẹ akanṣe rẹ ni kikun yẹ ki o dabi eyi:

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

Ni aaye yii, ohun gbogbo wa ni aye to tọ, ṣugbọn Parcel nilo oju-iwe HTML ati iwe afọwọkọ npm lati bẹrẹ olupin wa.

Tunto Parcel

Pẹlu awọn igbẹkẹle ti a fi sori ẹrọ ati folda ise agbese wa ti ṣetan fun wa lati bẹrẹ ifaminsi, a le tunto Parcel ni bayi ati ṣiṣe iṣẹ akanṣe wa ni agbegbe. Parcel funrararẹ ko nilo faili iṣeto ni apẹrẹ, ṣugbọn a nilo iwe afọwọkọ npm kan ati faili HTML lati bẹrẹ olupin wa.

Fọwọsi src/index.htmlfaili naa. Parcel nilo oju-iwe kan lati ṣe, nitorinaa a lo index.htmloju-iwe wa lati ṣeto awọn HTML ipilẹ diẹ, pẹlu CSS ati awọn faili JavaScript wa.

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

A n pẹlu diẹ diẹ ti iselona Bootstrap nibi pẹlu div class="container"ati <button>nitorinaa a rii nigbati Bootstrap's CSS ti kojọpọ nipasẹ Webpack.

Parcel yoo rii laifọwọyi pe a nlo Sass ati fi ohun itanna Sass Parcel sori ẹrọ lati ṣe atilẹyin fun. Sibẹsibẹ, ti o ba fẹ, o tun le ṣiṣẹ pẹlu ọwọ npm i --save-dev @parcel/transformer-sass.

Ṣafikun awọn iwe afọwọkọ Parcel npm. Ṣii naa package.jsonki o ṣafikun iwe startafọwọkọ atẹle si scriptsnkan naa. A yoo lo iwe afọwọkọ yii lati bẹrẹ olupin idagbasoke Parcel wa ati ṣe faili HTML ti a ṣẹda lẹhin ti o ti ṣajọ sinu distitọsọna naa.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Ati nikẹhin, a le bẹrẹ Parcel. Lati my-projectfolda ninu ebute rẹ, ṣiṣẹ iwe afọwọkọ npm tuntun ti a ṣafikun:
```
npm start
```

Ni apakan atẹle ati ipari si itọsọna yii, a yoo gbe gbogbo Bootstrap's CSS ati JavaScript wọle.

Gbe Bootstrap wọle

Gbigbe Bootstrap wọle si Parcel nilo agbewọle meji, ọkan sinu wa styles.scssati ọkan sinu main.js.

Gbe wọle Bootstrap ká CSS. Ṣafikun atẹle naa src/scss/styles.scsslati gbe gbogbo orisun Bootstrap Sass wọle.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
O tun le gbe awọn iwe aṣa wa wọle lọkọọkan ti o ba fẹ. Ka awọn iwe aṣẹ agbewọle Sass wa fun awọn alaye.
Gbe wọle Bootstrap's JS. Ṣafikun atẹle naa src/js/main.jslati gbe gbogbo Bootstrap's JS wọle. Popper yoo wa ni akowọle laifọwọyi nipasẹ Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
O tun le gbe awọn afikun JavaScript wọle lọkọọkan bi o ṣe nilo lati tọju awọn iwọn lapapo si isalẹ:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Ka awọn iwe aṣẹ JavaScript wa fun alaye diẹ sii lori bi a ṣe le lo awọn afikun Bootstrap.
Ati pe o ti pari! 🎉 Pẹlu orisun Bootstrap Sass ati JS ti kojọpọ ni kikun, olupin idagbasoke agbegbe rẹ yẹ ki o dabi eyi.

Bayi o le bẹrẹ fifi eyikeyi awọn paati Bootstrap ti o fẹ lati lo. Rii daju lati ṣayẹwo iṣẹ apẹẹrẹ Parcel pipe fun bii o ṣe le pẹlu afikun aṣa Sass ki o mu kiko rẹ pọ si nipa gbigbe wọle nikan awọn apakan ti Bootstrap's CSS ati JS ti o nilo.

Ri nkankan ti ko tọ tabi ti ọjọ nibi? Jọwọ ṣii ọrọ kan lori GitHub . Nilo iranlọwọ laasigbotitusita? Wa tabi bẹrẹ ijiroro lori GitHub.