Bootstrap & Parcel

Ny torolalana ofisialy momba ny fomba hampidirana sy famatorana ny CSS sy JavaScript an'ny Bootstrap amin'ny tetikasanao amin'ny fampiasana Parcel.

Amin'ity pejy ity

Te hitsambikina hatramin'ny farany? Ampidino ny kaody loharano sy ny demo miasa ho an'ity torolàlana ity avy amin'ny tahiry twbs/examples . Azonao atao ihany koa ny manokatra ny ohatra ao amin'ny StackBlitz fa tsy mihazakazaka izany satria tsy tohanana ao amin'izao fotoana izao ny Parcel.

Hametraka

Manangana tetikasa Parcel miaraka amin'ny Bootstrap hatrany am-boalohany izahay, noho izany dia misy fepetra takiana sy dingana aloha vao tena manomboka. Ity torolàlana ity dia mitaky anao hametraka ny Node.js ary mahafantatra ny terminal.

Mamorona lahatahiry tetikasa ary amboary npm. Hamorona ny my-projectlahatahiry isika ary hanomboka ny npm miaraka amin'ny -ytohan-kevitra mba hialana amin'ny fametrahana ny fanontaniana mifandraika aminay rehetra.
```
mkdir my-project && cd my-project
npm init -y
```
Mametraka Parcel. Tsy sahala amin'ny torolàlana Webpack, tsy misy afa-tsy miankina amin'ny fitaovana fananganana tokana eto. Hametraka ho azy ireo mpanova fiteny (toa an'i Sass) i Parcel rehefa mahita azy ireo. Mampiasa --save-devfamantarana izahay fa io fiankinan-doha io dia natao ho an'ny fampandrosoana ihany fa tsy ho an'ny famokarana.
```
npm i --save-dev parcel
```
Mametraka Bootstrap. Afaka mametraka Bootstrap isika izao. Hametraka Popper ihany koa izahay satria miankina amin'ny toerana misy azy ny dropdowns, popovers, ary ny tooltips. Raha tsy mikasa ny hampiasa ireo singa ireo ianao dia azonao atao ny manala ny Popper eto.
```
npm i --save bootstrap @popperjs/core
```

Amin'izao fotoana izao dia manana ny fiankinan-doha ilaina rehetra isika, afaka manomboka miasa amin'ny famoronana ny rakitra tetikasa ary manafatra Bootstrap.

Rafitra tetikasa

Efa namorona ny my-projectlahatahiry izahay ary nanangana npm. Ankehitriny dia hamorona ny srclahatahiry, ny stylesheet ary ny rakitra JavaScript izahay mba hamenoana ny rafitry ny tetikasa. Alefaso avy amin'ny my-project, na mamorona ny lahatahiry sy ny firafitry ny rakitra aseho etsy ambany.

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

Rehefa vita ianao dia tokony ho toy izao ny tetikasanao feno:

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

Amin'izao fotoana izao, ny zava-drehetra dia eo amin'ny toerana mety, fa ny Parcel dia mila pejy HTML sy script npm hanombohana ny mpizara.

Configure Parcel

Miaraka amin'ny fiankinan-doha napetraka sy ny lahatahiry tetik'asantsika efa vonona hanomboka ny kaody, dia afaka manamboatra Parcel isika izao ary mampandeha ny tetikasantsika eo an-toerana. Ny parcel mihitsy dia tsy mitaky fichier configuration amin'ny alàlan'ny famolavolana, fa mila script npm sy rakitra HTML hanombohana ny servery.

Fenoy ny src/index.htmlrakitra. Mila pejy havoaka ny Parcel, noho izany dia mampiasa ny pejinay izahay index.htmlhananganana HTML fototra, anisan'izany ny rakitra CSS sy 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>

Ampidirinay eto ny styling Bootstrap kely miaraka amin'ny div class="container"ary <button>mba ho hitantsika rehefa entin'ny Webpack ny CSS Bootstrap.

Ho hitan'i Parcel fa mampiasa Sass izahay ary hametraka ny plugin Sass Parcel hanohanana azy. Na izany aza, raha tianao, dia azonao atao ihany koa ny mihazakazaka npm i --save-dev @parcel/transformer-sass.

Ampio ny parcel npm scripts. Sokafy ny package.jsonary ampio ity startscript manaraka ity amin'ilay scriptszavatra. Hampiasa an'ity script ity izahay hanombohana ny lohamilina fampivoarana Parcel ary handika ny rakitra HTML noforoninay rehefa avy natambatra tao amin'ny distlahatahiry.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Ary farany, afaka manomboka Parcel isika. Avy amin'ny my-projectlahatahiry ao amin'ny terminal-nao, tadiavo ilay script npm vao nampidirina:
```
npm start
```

Ao amin'ny fizarana manaraka sy farany amin'ity torolàlana ity dia hanafatra ny CSS sy JavaScript rehetra an'ny Bootstrap izahay.

Import Bootstrap

Ny fanafarana Bootstrap ao amin'ny Parcel dia mitaky fanafarana roa, ny iray ao aminay styles.scssary ny iray ao amin'ny main.js.

Ampidiro ny CSS Bootstrap. Ampio ity manaraka ity src/scss/styles.scssmba hanafatra ny loharanon'ny Bootstrap rehetra Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Azonao atao ihany koa ny manafatra ny stylesheets tsirairay raha tianao. Vakio ny antontan-taratasy fanafarana Sass ho an'ny antsipiriany.
Import Bootstrap's JS. Ampio ireto manaraka ireto mba src/js/main.jshanafatra ny JS Bootstrap rehetra. Hafatra ho azy amin'ny alàlan'ny Bootstrap ny Popper.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Azonao atao ihany koa ny manafatra plugins JavaScript tsirairay raha ilaina mba hampihenana ny haben'ny fonosana:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Vakio ny JavaScript docs raha mila fanazavana fanampiny momba ny fampiasana ny plugins Bootstrap.
Ary vita ianao! 🎉 Miaraka amin'ny loharanon'i Bootstrap Sass sy JS feno feno, dia tokony ho toy izao ny lohamilina fampandrosoana eo an-toerana.

Now you can start adding any Bootstrap components you want to use. Be sure to check out the complete Parcel example project for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap’s CSS and JS that you need.

See something wrong or out of date here? Please open an issue on GitHub. Need help troubleshooting? Search or start a discussion on GitHub.