Bootstrap e paquete

A guía oficial de como incluír e agrupar CSS e JavaScript de Bootstrap no teu proxecto usando Parcel.

Nesta páxina

Queres saltar ata o final? Descarga o código fonte e a demostración de traballo desta guía desde o repositorio twbs/examples . Tamén podes abrir o exemplo en StackBlitz pero non executalo porque Parcel non é compatible neste momento.

Montar

Estamos a construír un proxecto de Parcel con Bootstrap desde cero, polo que hai algúns requisitos previos e pasos previos antes de poder comezar realmente. Esta guía require que teñas instalado Node.js e algo de familiaridade co terminal.

Crea un cartafol do proxecto e configura npm. Crearemos o my-projectcartafol e inicializaremos npm co -yargumento para evitar que nos faga todas as preguntas interactivas.
```
mkdir my-project && cd my-project
npm init -y
```
Instalar parcela. A diferenza da nosa guía Webpack, aquí só hai unha única dependencia da ferramenta de compilación. Parcel instalará automaticamente transformadores de idioma (como Sass) a medida que os detecte. Usamos --save-devpara sinalar que esta dependencia é só para o desenvolvemento e non para a produción.
```
npm i --save-dev parcel
```
Instalar Bootstrap. Agora podemos instalar Bootstrap. Tamén instalaremos Popper xa que os nosos menús despregables, popovers e informacións sobre ferramentas dependen del para o seu posicionamento. Se non pensas usar eses compoñentes, podes omitir Popper aquí.
```
npm i --save bootstrap @popperjs/core
```

Agora que temos todas as dependencias necesarias instaladas, podemos poñernos a traballar creando os ficheiros do proxecto e importando Bootstrap.

Estrutura do proxecto

Xa creamos o my-projectcartafol e inicializamos npm. Agora tamén crearemos o noso srccartafol, folla de estilo e ficheiro JavaScript para completar a estrutura do proxecto. Executa o seguinte desde my-project, ou crea manualmente o cartafol e a estrutura de ficheiros que se mostran a continuación.

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

Cando remates, o teu proxecto completo debería verse así:

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

Neste punto, todo está no lugar correcto, pero Parcel necesita unha páxina HTML e un script npm para iniciar o noso servidor.

Configurar parcela

Con dependencias instaladas e o noso cartafol do proxecto preparado para comezar a codificar, agora podemos configurar Parcel e executar o noso proxecto localmente. O propio paquete non require ningún ficheiro de configuración por deseño, pero necesitamos un script npm e un ficheiro HTML para iniciar o noso servidor.

Encha o src/index.htmlficheiro. Parcel necesita unha páxina para renderizar, polo que usamos a nosa index.htmlpáxina para configurar algúns HTML básicos, incluídos os nosos ficheiros CSS e 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>

Incluimos aquí un pouco de estilo Bootstrap co div class="container"e <button>para que vexamos cando Webpack carga o CSS de Bootstrap.

Parcel detectará automaticamente que estamos a usar Sass e instalará o complemento Sass Parcel para admitilo. Non obstante, se o desexa, tamén pode executar manualmente npm i --save-dev @parcel/transformer-sass.

Engade os scripts de Parcel npm. Abre o package.jsone engade o seguinte startscript ao scriptsobxecto. Usaremos este script para iniciar o noso servidor de desenvolvemento de Parcel e renderizar o ficheiro HTML que creamos despois de compilalo no distdirectorio.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
E, finalmente, podemos comezar Parcel. Desde o my-projectcartafol do teu terminal, executa ese script npm recén engadido:
```
npm start
```

Na seguinte e última sección desta guía, importaremos todos os CSS e JavaScript de Bootstrap.

Importar Bootstrap

Importar Bootstrap a Parcel require dúas importacións, unha no noso styles.scsse outra no noso main.js.

Importar o CSS de Bootstrap. Engade o seguinte a src/scss/styles.scsspara importar toda a fonte Sass de Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Tamén podes importar as nosas follas de estilo individualmente se queres. Lea os nosos documentos de importación de Sass para obter máis detalles.
Importar JS de Bootstrap. Engade o seguinte a src/js/main.jspara importar todos os JS de Bootstrap. Popper importarase automaticamente a través de Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Tamén pode importar complementos de JavaScript individualmente segundo sexa necesario para reducir o tamaño dos paquetes:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Lea os nosos documentos de JavaScript para obter máis información sobre como usar os complementos de Bootstrap.
E xa estás! 🎉 Co Sass e JS de orixe de Bootstrap cargados completamente, o teu servidor de desenvolvemento local debería verse así.

Agora podes comezar a engadir calquera compoñentes de Bootstrap que queiras usar. Asegúrate de consultar o proxecto completo de exemplo de Parcel para saber como incluír Sass personalizado adicional e optimizar a túa compilación importando só as partes do CSS e JS de Bootstrap que necesites.

Ves algo incorrecto ou desactualizado aquí? Abre un problema en GitHub . Necesitas axuda para solucionar problemas? Busca ou inicia unha discusión en GitHub.