Bootstrap i paquet

La guia oficial sobre com incloure i agrupar CSS i JavaScript de Bootstrap al vostre projecte mitjançant Parcel.

En aquesta pàgina

Vols saltar fins al final? Baixeu el codi font i la demostració de treball d'aquesta guia des del dipòsit twbs/examples . També podeu obrir l'exemple a StackBlitz però no executar-lo perquè Parcel no s'hi admet actualment.

Configuració

Estem construint un projecte de Parcel amb Bootstrap des de zero, de manera que hi ha alguns requisits previs i passos inicials abans de poder començar realment. Aquesta guia requereix que tingueu instal·lat Node.js i una mica de familiaritat amb el terminal.

Creeu una carpeta de projecte i configureu npm. Crearem la my-projectcarpeta i inicialitzarem npm amb l' -yargument per evitar que ens faci totes les preguntes interactives.
```
mkdir my-project && cd my-project
npm init -y
```
Instal·leu Parcel. A diferència de la nostra guia Webpack, aquí només hi ha una única dependència de l'eina de creació. Parcel instal·larà automàticament transformadors d'idioma (com Sass) a mesura que els detecti. Utilitzem --save-devper indicar que aquesta dependència només és per al desenvolupament i no per a la producció.
```
npm i --save-dev parcel
```
Instal·leu Bootstrap. Ara podem instal·lar Bootstrap. També instal·larem Popper, ja que els nostres menús desplegables, finestres emergents i informació sobre eines en depenen per al seu posicionament. Si no teniu previst utilitzar aquests components, podeu ometre Popper aquí.
```
npm i --save bootstrap @popperjs/core
```

Ara que tenim totes les dependències necessàries instal·lades, podem posar-nos a treballar creant els fitxers del projecte i important Bootstrap.

Estructura del projecte

Ja hem creat la my-projectcarpeta i hem inicialitzat npm. Ara també crearem la nostra srccarpeta, full d'estil i fitxer JavaScript per completar l'estructura del projecte. Executeu el següent des de my-project, o creeu manualment la carpeta i l'estructura de fitxers que es mostren a continuació.

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

Quan hàgiu acabat, el vostre projecte complet hauria de ser així:

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

En aquest punt, tot està al lloc correcte, però Parcel necessita una pàgina HTML i un script npm per iniciar el nostre servidor.

Configura el paquet

Amb les dependències instal·lades i la nostra carpeta de projectes preparada perquè comencem a codificar, ara podem configurar Parcel i executar el nostre projecte localment. El mateix paquet no requereix cap fitxer de configuració per disseny, però necessitem un script npm i un fitxer HTML per iniciar el nostre servidor.

Ompliu el src/index.htmlfitxer. Parcel necessita una pàgina per renderitzar-se, de manera que utilitzem la nostra index.htmlpàgina per configurar HTML bàsic, inclosos els nostres fitxers CSS i 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>

Estem inclòs una mica d'estil de Bootstrap aquí amb div class="container"i <button>perquè vegem quan Webpack carrega el CSS de Bootstrap.

Parcel detectarà automàticament que estem utilitzant Sass i instal·larà el connector Sass Parcel per donar-hi suport. Tanmateix, si voleu, també podeu executar manualment npm i --save-dev @parcel/transformer-sass.

Afegiu els scripts de Parcel npm. Obriu package.jsoni afegiu l' startscript següent a l' scriptsobjecte. Utilitzarem aquest script per iniciar el nostre servidor de desenvolupament de Parcel i renderitzar el fitxer HTML que hem creat després de compilar-lo al distdirectori.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
I finalment, podem començar Parcel. Des de la my-projectcarpeta del vostre terminal, executeu aquest nou script npm afegit:
```
npm start
```

A la següent i darrera secció d'aquesta guia, importarem tots els CSS i JavaScript de Bootstrap.

Importa Bootstrap

La importació de Bootstrap a Parcel requereix dues importacions, una al nostre styles.scssi una altra al nostre main.js.

Importa el CSS de Bootstrap. Afegiu el següent a src/scss/styles.scssper importar tot el Sass d'origen de Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
També podeu importar els nostres fulls d'estil individualment si voleu. Llegiu els nostres documents d'importació de Sass per obtenir més informació.
Importa JS de Bootstrap. Afegiu el següent a src/js/main.jsper importar tots els JS de Bootstrap. Popper s'importarà automàticament mitjançant Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
També podeu importar connectors de JavaScript individualment segons sigui necessari per reduir les mides dels paquets:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Llegiu els nostres documents de JavaScript per obtenir més informació sobre com utilitzar els connectors de Bootstrap.
I ja has acabat! 🎉 Amb la font Sass i JS de Bootstrap completament carregades, ara el vostre servidor de desenvolupament local hauria de tenir aquest aspecte.

Ara podeu començar a afegir qualsevol component Bootstrap que vulgueu utilitzar. Assegureu-vos de consultar el projecte d'exemple de Parcel complet per saber com incloure Sass personalitzat addicional i optimitzar la vostra compilació important només les parts del CSS i JS de Bootstrap que necessiteu.

Veus alguna cosa malament o no actualitzada? Obriu un problema a GitHub . Necessites ajuda per resoldre problemes? Cerca o inicia una discussió a GitHub.