Bưu kiện

Tìm hiểu cách đưa Bootstrap vào dự án của bạn bằng cách sử dụng Parcel.

Trên trang này

Cài đặt bưu kiện

Cài đặt Bootstrap

Cài đặt bootstrap dưới dạng mô-đun Node.js bằng npm.

Bootstrap phụ thuộc vào Popper , được chỉ định trong thuộc peerDependenciestính. Điều này có nghĩa là bạn sẽ phải đảm bảo thêm cả hai vào mục đích package.jsonsử dụng của mình npm install @popperjs/core.

Khi tất cả sẽ hoàn thành, dự án của bạn sẽ có cấu trúc như sau:

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

Nhập JavaScript

Nhập JavaScript của Bootstrap vào điểm nhập của ứng dụng của bạn (thường là src/index.js). Bạn có thể nhập tất cả các plugin của chúng tôi trong một tệp hoặc riêng biệt nếu bạn chỉ yêu cầu một tập hợp con của chúng.

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

Nhập CSS

Để tận dụng toàn bộ tiềm năng của Bootstrap và tùy chỉnh nó theo nhu cầu của bạn, hãy sử dụng các tệp nguồn như một phần của quy trình đóng gói dự án của bạn.

Tạo của riêng bạn scss/custom.scssđể nhập các tệp Sass của Bootstrap và sau đó ghi đè các biến tùy chỉnh được tích hợp sẵn .

Xây dựng ứng dụng

Bao gồm src/index.jstrước </body>thẻ đóng.

<!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>

Chỉnh sửa`package.json`

Thêm devvà buildcác tập lệnh trong package.jsontệp của bạn.

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

Chạy tập lệnh nhà phát triển

Ứng dụng của bạn sẽ có thể truy cập được tại http://127.0.0.1:1234.

npm run dev

Tạo tệp ứng dụng

Các tệp đã xây dựng nằm trong build/thư mục.

npm run build