Bootstrap tut 7 : Sử dụng Parcel

By DragonKnightMT Last updated Th11 12, 2021

https://getbootstrap.com/docs/5.0/getting-started/parcel/

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.Ưu đãi trong thời gian có hạn: Nhận 10 hình ảnh Adobe Stock miễn phí.quảng cáo qua CarbonTrên trang này

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

Cài đặt Gói 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:Sao chép

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 ứ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.Sao chép

// 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 .Sao chép

<!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 .Sao chép

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