Bootstrap tut 7 : Sử dụng Parcel

0
(0)

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"
}

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

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

npm run build

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Related posts

Bootstrap Basic tut 8: Khả năng tiếp cận , RFS và RTL

Bootstrap Basic tut 6: Webpack và các gói ( bundlers)

Bootstrap Basic tut 5: Xây dựng công cụ với các lệnh npm