Paczka

Dowiedz się, jak włączyć Bootstrap do swojego projektu za pomocą Parcel.

Na tej stronie

Zainstaluj paczkę

Zainstaluj Bootstrap

Zainstaluj bootstrap jako moduł Node.js przy użyciu npm.

Bootstrap zależy od Poppera , który jest określony we peerDependencieswłaściwości. Oznacza to, że będziesz musiał dodać oba z nich do swojego package.jsonużytku npm install @popperjs/core.

Kiedy wszystko zostanie ukończone, Twój projekt będzie miał następującą strukturę:

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

Importowanie JavaScript

Zaimportuj kod JavaScript Bootstrap do punktu wejścia aplikacji (zwykle src/index.js). Możesz zaimportować wszystkie nasze wtyczki w jednym pliku lub osobno, jeśli potrzebujesz tylko ich części.

// 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';

Importowanie CSS

Aby w pełni wykorzystać potencjał Bootstrap i dostosować go do swoich potrzeb, użyj plików źródłowych jako części procesu tworzenia pakietów.

Utwórz własne scss/custom.scss, aby zaimportować pliki Sass Bootstrap, a następnie zastąpić wbudowane zmienne niestandardowe .

Zbuduj aplikację

Uwzględnij przed tagiem src/index.jszamykającym .</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>

Edytować`package.json`

Dodaj devi buildskrypty w swoim package.jsonpliku.

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

Uruchom skrypt deweloperski

Twoja aplikacja będzie dostępna pod adresem http://127.0.0.1:1234.

npm run dev

Twórz pliki aplikacji

Zbudowane pliki znajdują się w build/folderze.

npm run build