Bootstrap & Bưu kiện

Hướng dẫn chính thức về cách bao gồm và gói CSS và JavaScript của Bootstrap trong dự án của bạn bằng cách sử dụng Parcel.

Trên trang này

Bạn muốn bỏ qua đến cuối? Tải xuống mã nguồn và bản trình diễn hoạt động cho hướng dẫn này từ kho twbs / ví dụ . Bạn cũng có thể mở ví dụ trong StackBlitz nhưng không chạy nó vì Parcel hiện không được hỗ trợ ở đó.

Thành lập

Chúng tôi đang xây dựng một dự án Parcel với Bootstrap từ đầu, vì vậy có một số điều kiện tiên quyết và các bước trước khi chúng tôi thực sự có thể bắt đầu. Hướng dẫn này yêu cầu bạn phải cài đặt Node.js và một số thông tin quen thuộc với thiết bị đầu cuối.

Tạo một thư mục dự án và thiết lập npm. Chúng tôi sẽ tạo my-projectthư mục và khởi tạo npm với -yđối số để tránh nó hỏi chúng tôi tất cả các câu hỏi tương tác.
```
mkdir my-project && cd my-project
npm init -y
```
Cài đặt bưu kiện. Không giống như hướng dẫn Webpack của chúng tôi, chỉ có một công cụ xây dựng phụ thuộc duy nhất ở đây. Parcel sẽ tự động cài đặt bộ biến đổi ngôn ngữ (như Sass) khi nó phát hiện ra chúng. Chúng tôi sử dụng --save-devđể báo hiệu rằng sự phụ thuộc này chỉ dành cho mục đích phát triển chứ không phải cho sản xuất.
```
npm i --save-dev parcel
```
Cài đặt Bootstrap. Bây giờ chúng ta có thể cài đặt Bootstrap. Chúng tôi cũng sẽ cài đặt Popper vì trình đơn thả xuống, cửa sổ bật lên và chú giải công cụ của chúng tôi phụ thuộc vào nó để xác định vị trí của chúng. Nếu bạn không có kế hoạch sử dụng các thành phần đó, bạn có thể bỏ qua Popper ở đây.
```
npm i --save bootstrap @popperjs/core
```

Bây giờ chúng ta đã cài đặt tất cả các phụ thuộc cần thiết, chúng ta có thể bắt đầu tạo các tệp dự án và nhập Bootstrap.

Cấu trúc dự án

Chúng tôi đã tạo my-projectthư mục và khởi tạo npm. Bây giờ chúng ta cũng sẽ tạo srcthư mục, biểu định kiểu và tệp JavaScript để hoàn thiện cấu trúc dự án. Chạy phần sau từ my-projecthoặc tạo cấu trúc thư mục và tệp theo cách thủ công được hiển thị bên dưới.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

Khi bạn hoàn thành, dự án hoàn chỉnh của bạn sẽ trông như thế này:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json

Tại thời điểm này, mọi thứ đã ở đúng vị trí, nhưng Parcel cần một trang HTML và tập lệnh npm để khởi động máy chủ của chúng tôi.

Định cấu hình bưu kiện

Với các phần phụ thuộc được cài đặt và thư mục dự án của chúng tôi đã sẵn sàng để chúng tôi bắt đầu viết mã, giờ đây chúng tôi có thể định cấu hình Parcel và chạy dự án của chúng tôi cục bộ. Bản thân bưu kiện không yêu cầu tệp cấu hình theo thiết kế, nhưng chúng tôi cần một tập lệnh npm và một tệp HTML để khởi động máy chủ của chúng tôi.

Điền vào src/index.htmltệp. Parcel cần một trang để hiển thị, vì vậy chúng tôi sử dụng index.htmltrang của mình để thiết lập một số HTML cơ bản, bao gồm các tệp CSS và JavaScript của chúng tôi.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>
```
Chúng tôi bao gồm một chút kiểu dáng Bootstrap ở đây với div class="container"và <button>để chúng tôi thấy khi nào CSS của Bootstrap được tải bởi Webpack.

Parcel sẽ tự động phát hiện chúng tôi đang sử dụng Sass và cài đặt plugin Sass Parcel để hỗ trợ nó. Tuy nhiên, nếu muốn, bạn cũng có thể chạy theo cách thủ công npm i --save-dev @parcel/transformer-sass.
Thêm các tập lệnh Parcel npm. Mở package.jsonvà thêm starttập lệnh sau vào scriptsđối tượng. Chúng tôi sẽ sử dụng tập lệnh này để khởi động máy chủ phát triển Parcel của mình và hiển thị tệp HTML mà chúng tôi đã tạo sau khi nó được biên dịch vào thư mục dist.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Và cuối cùng, chúng ta có thể bắt đầu Parcel. Từ my-projectthư mục trong thiết bị đầu cuối của bạn, hãy chạy tập lệnh npm mới được thêm vào đó:
```
npm start
```

Trong phần tiếp theo và cuối cùng của hướng dẫn này, chúng tôi sẽ nhập tất cả CSS và JavaScript của Bootstrap.

Nhập Bootstrap

Việc nhập Bootstrap vào Parcel yêu cầu hai lần nhập, một vào của chúng tôi styles.scssvà một vào của chúng tôi main.js.

Nhập CSS của Bootstrap. Thêm phần sau vào src/scss/styles.scssđể nhập tất cả Sass nguồn của Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Bạn cũng có thể nhập từng bảng định kiểu của chúng tôi nếu bạn muốn. Đọc tài liệu nhập Sass của chúng tôi để biết chi tiết.
Nhập JS của Bootstrap. Thêm phần sau vào src/js/main.jsđể nhập tất cả JS của Bootstrap. Popper sẽ được nhập tự động thông qua Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Bạn cũng có thể nhập từng plugin JavaScript nếu cần để giảm kích thước gói:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Đọc tài liệu JavaScript của chúng tôi để biết thêm thông tin về cách sử dụng các plugin của Bootstrap.
Và bạn đã hoàn thành! 🎉 Với nguồn Sass và JS của Bootstrap được tải đầy đủ, máy chủ phát triển cục bộ của bạn bây giờ sẽ trông như thế này.

Bây giờ bạn có thể bắt đầu thêm bất kỳ thành phần Bootstrap nào bạn muốn sử dụng. Hãy nhớ xem dự án mẫu Parcel hoàn chỉnh để biết cách bao gồm Sass tùy chỉnh bổ sung và tối ưu hóa bản dựng của bạn bằng cách chỉ nhập các phần CSS và JS của Bootstrap mà bạn cần.

Bạn thấy điều gì đó không ổn hoặc lỗi thời ở đây? Vui lòng mở một vấn đề trên GitHub . Cần trợ giúp khắc phục sự cố? Tìm kiếm hoặc bắt đầu thảo luận trên GitHub.