Bootstrap & Vite

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 Vite.

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 để chỉnh sửa trực tiếp.

Thành lập

Chúng tôi đang xây dựng một dự án Vite 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 Vite. 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. 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 vite
```
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
```
Cài đặt phụ thuộc bổ sung. Ngoài Vite và Bootstrap, chúng ta cần một phụ thuộc khác (Sass) để nhập và đóng gói CSS của Bootstrap một cách chính xác.
```
npm i --save-dev sass
```

Bây giờ chúng ta đã cài đặt và thiết lập 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 vite.config.js

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
└── vite.config.js

Tại thời điểm này, mọi thứ đã ở đúng vị trí, nhưng Vite sẽ không hoạt động vì chúng tôi chưa điền vào vite.config.js.

Định cấu hình Vite

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 Vite và chạy dự án của chúng tôi cục bộ.

Mở vite.config.jstrong trình chỉnh sửa của bạn. Vì nó trống, chúng tôi sẽ cần thêm một số cấu hình boilerplate vào nó để chúng tôi có thể khởi động máy chủ của mình. Phần này của cấu hình cho Vite biết phải tìm JavaScript của dự án của chúng tôi và cách máy chủ phát triển sẽ hoạt động (kéo từ srcthư mục với tải lại nóng).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

Tiếp theo chúng ta điền vào src/index.html. Đây là trang HTML mà Vite sẽ tải trong trình duyệt để sử dụng CSS và JS đi kèm mà chúng tôi sẽ thêm vào nó trong các bước sau.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </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 Vite.

Bây giờ chúng ta cần một tập lệnh npm để chạy Vite. Mở package.jsonvà thêm starttập lệnh hiển thị bên dưới (bạn đã có tập lệnh thử nghiệm). Chúng tôi sẽ sử dụng tập lệnh này để khởi động máy chủ nhà phát triển Vite cục bộ của chúng tôi.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Và cuối cùng, chúng ta có thể bắt đầu Vite. 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

Thiết lập nhập Sass của Bootstrap vào vite.config.js. Tệp cấu hình của bạn hiện đã hoàn tất và phải khớp với đoạn mã bên dưới. Phần mới duy nhất ở đây là resolvephần — chúng tôi sử dụng phần này để thêm bí danh vào các tệp nguồn của chúng tôi bên trong node_modulesđể giữ cho quá trình nhập đơn giản nhất có thể.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
Bây giờ, hãy 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.
Tiếp theo, chúng tôi tải CSS và nhập JavaScript của Bootstrap. Thêm phần sau vào src/js/main.jsđể tải CSS và nhập tất cả JS của Bootstrap. Popper sẽ được nhập tự động thông qua Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// 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 ví dụ Vite 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.