Bootstrap & Parcela

O guia oficial de como incluir e agrupar CSS e JavaScript do Bootstrap em seu projeto usando o Parcel.

Nesta página

Quer pular para o final? Baixe o código-fonte e a demonstração de trabalho deste guia no repositório twbs/examples . Você também pode abrir o exemplo no StackBlitz, mas não executá-lo porque o Parcel não é suportado lá no momento.

Configurar

Estamos construindo um projeto Parcel com Bootstrap do zero, então existem alguns pré-requisitos e etapas iniciais antes que possamos realmente começar. Este guia requer que você tenha o Node.js instalado e alguma familiaridade com o terminal.

Crie uma pasta de projeto e configure o npm. Vamos criar a my-projectpasta e inicializar o npm com o -yargumento para evitar que ele nos faça todas as perguntas interativas.
```
mkdir my-project && cd my-project
npm init -y
```
Instale Parcela. Ao contrário do nosso guia Webpack, há apenas uma única dependência de ferramenta de compilação aqui. O Parcel instalará automaticamente transformadores de linguagem (como Sass) à medida que os detecta. Usamos --save-devpara sinalizar que essa dependência é apenas para uso em desenvolvimento e não para produção.
```
npm i --save-dev parcel
```
Instale o Bootstrap. Agora podemos instalar o Bootstrap. Também instalaremos o Popper, pois nossos menus suspensos, popovers e dicas de ferramentas dependem dele para seu posicionamento. Se você não planeja usar esses componentes, pode omitir Popper aqui.
```
npm i --save bootstrap @popperjs/core
```

Agora que temos todas as dependências necessárias instaladas, podemos começar a criar os arquivos do projeto e importar o Bootstrap.

Estrutura do projeto

Já criamos a my-projectpasta e inicializamos o npm. Agora também criaremos nossa srcpasta, folha de estilo e arquivo JavaScript para completar a estrutura do projeto. Execute o seguinte em my-projectou crie manualmente a estrutura de pastas e arquivos mostrada abaixo.

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

Quando terminar, seu projeto completo deve ficar assim:

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

Neste ponto, tudo está no lugar certo, mas Parcel precisa de uma página HTML e script npm para iniciar nosso servidor.

Configurar pacote

Com as dependências instaladas e nossa pasta do projeto pronta para começarmos a codificar, agora podemos configurar o Parcel e executar nosso projeto localmente. O próprio pacote não requer arquivo de configuração por design, mas precisamos de um script npm e um arquivo HTML para iniciar nosso servidor.

Preencha o src/index.htmlarquivo. Parcel precisa de uma página para renderizar, então usamos nossa index.htmlpágina para configurar alguns HTML básicos, incluindo nossos arquivos 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>
```
Estamos incluindo um pouco do estilo do Bootstrap aqui com o div class="container"e <button>para que possamos ver quando o CSS do Bootstrap é carregado pelo Webpack.

O Parcel detectará automaticamente que estamos usando o Sass e instalará o plug-in Sass Parcel para apoiá-lo. No entanto, se desejar, você também pode executar manualmente o npm i --save-dev @parcel/transformer-sass.
Adicione os scripts Parcel npm. Abra o package.jsone adicione o startscript a seguir ao scriptsobjeto. Usaremos este script para iniciar nosso servidor de desenvolvimento Parcel e renderizar o arquivo HTML que criamos depois de compilado no distdiretório.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
E, finalmente, podemos iniciar o Parcel. Na my-projectpasta do seu terminal, execute o script npm recém-adicionado:
```
npm start
```

Na próxima e última seção deste guia, importaremos todos os CSS e JavaScript do Bootstrap.

Importar Bootstrap

Importar o Bootstrap para o Parcel requer duas importações, uma para o nosso styles.scsse outra para o nosso main.js.

Importe o CSS do Bootstrap. Adicione o seguinte para src/scss/styles.scssimportar todos os Sass de origem do Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Você também pode importar nossas folhas de estilo individualmente, se desejar. Leia nossos documentos de importação Sass para obter detalhes.
Importe o JS do Bootstrap. Adicione o seguinte para src/js/main.jsimportar todos os JS do Bootstrap. O Popper será importado automaticamente através do Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Você também pode importar plug-ins JavaScript individualmente, conforme necessário, para reduzir o tamanho dos pacotes:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Leia nossos documentos JavaScript para obter mais informações sobre como usar os plugins do Bootstrap.
E pronto! 🎉 Com a fonte Sass e JS do Bootstrap totalmente carregadas, seu servidor de desenvolvimento local agora deve ficar assim.

Agora você pode começar a adicionar quaisquer componentes do Bootstrap que deseja usar. Certifique-se de verificar o projeto de exemplo Parcel completo para saber como incluir Sass personalizado adicional e otimizar sua compilação importando apenas as partes do CSS e JS do Bootstrap que você precisa.

Vê algo errado ou desatualizado aqui? Por favor , abra um problema no GitHub . Precisa de ajuda para solucionar problemas? Pesquise ou inicie uma discussão no GitHub.