Pacco

Scopri come includere Bootstrap nel tuo progetto usando Parcel.

Su questa pagina

Installa pacco

Installa Bootstrap

Installa bootstrap come modulo Node.js usando npm.

Bootstrap dipende da Popper , che è specificato nella peerDependenciesproprietà. Ciò significa che dovrai assicurarti di aggiungerli entrambi al tuo package.jsonutilizzo npm install @popperjs/core.

Quando tutto sarà completato, il tuo progetto sarà strutturato in questo modo:

project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

Importazione di JavaScript

Importa JavaScript di Bootstrap nel punto di ingresso della tua app (di solito src/index.js). Puoi importare tutti i nostri plugin in un file o separatamente se ne hai bisogno solo in un sottoinsieme.

// Import all plugins
import * as bootstrap from 'bootstrap';

// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';

// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';

Importazione CSS

Per sfruttare tutto il potenziale di Bootstrap e personalizzarlo in base alle tue esigenze, utilizza i file di origine come parte del processo di raggruppamento del tuo progetto.

Crea il tuo scss/custom.scssper importare i file Sass di Bootstrap e quindi sovrascrivere le variabili personalizzate integrate .

Crea app

Includi prima del tag src/index.jsdi chiusura .</body>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

Modificare`package.json`

Aggiungi deve buildscript nel tuo package.jsonfile.

"scripts": {
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}

Esegui script di sviluppo

La tua app sarà accessibile all'indirizzo http://127.0.0.1:1234.

npm run dev

Crea file di app

I file creati sono nella build/cartella.

npm run build