Bootstrap и Vite

Официальное руководство по включению и сборке CSS и JavaScript Bootstrap в вашем проекте с использованием Vite.

На этой странице

Хотите перейти сразу к концу? Скачайте исходный код и рабочее демо для этого руководства из репозитория twbs/examples. Вы также можете открыть пример в StackBlitz для редактирования в реальном времени.

Что такое Vite?

Vite — это современный инструмент сборки фронтенда, разработанный для скорости и простоты. Он обеспечивает эффективный и оптимизированный опыт разработки, особенно для современных JavaScript-фреймворков.

Настройка

Мы создаем проект Vite с Bootstrap с нуля, поэтому есть некоторые предварительные условия и первоначальные шаги, прежде чем мы сможем по-настоящему начать. Это руководство требует, чтобы у вас был установлен Node.js и некоторое знакомство с терминалом.

Создайте папку проекта и настройте npm. Мы создадим папку my-project и инициализируем npm с аргументом -y, чтобы избежать всех интерактивных вопросов.
```
mkdir my-project && cd my-project
npm init -y
```
Установите Vite. В отличие от нашего руководства по Webpack, здесь есть только одна зависимость инструмента сборки. Мы используем --save-dev, чтобы обозначить, что эта зависимость предназначена только для разработки, а не для продакшена.
```
npm i --save-dev vite
```
Установите Bootstrap. Теперь мы можем установить Bootstrap. Мы также установим Popper, поскольку наши выпадающие списки, поповеры и подсказки зависят от него для позиционирования. Если вы не планируете использовать эти компоненты, вы можете опустить Popper здесь.
```
npm i --save bootstrap @popperjs/core
```
Установите дополнительную зависимость. Помимо Vite и Bootstrap, нам нужна еще одна зависимость (Sass) для правильного импорта и сборки CSS Bootstrap.
```
npm i --save-dev sass
```

Теперь, когда у нас установлены и настроены все необходимые зависимости, мы можем приступить к созданию файлов проекта и импорту Bootstrap.

Структура проекта

Мы уже создали папку my-project и инициализировали npm. Теперь мы также создадим нашу папку src, таблицу стилей и JavaScript-файл, чтобы завершить структуру проекта. Выполните следующее из my-project или вручную создайте структуру папок и файлов, показанную ниже.

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

Когда вы закончите, ваш полный проект должен выглядеть так:

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

На этом этапе все находится в нужном месте, но Vite не будет работать, поскольку мы еще не заполнили наш vite.config.js.

Конфигурация Vite

После установки зависимостей и готовности папки проекта к началу кодирования, мы теперь можем настроить Vite и запустить наш проект локально.

Откройте vite.config.js в вашем редакторе. Поскольку он пустой, нам нужно добавить в него некоторую шаблонную конфигурацию, чтобы мы могли запустить наш сервер. Эта часть конфигурации сообщает Vite, где искать JavaScript нашего проекта и как должен вести себя сервер разработки (загружая из папки src с горячей перезагрузкой).
```
import { resolve } from 'path'

export default {
  root: resolve(__dirname, 'src'),
  build: {
    outDir: '../dist'
  },
  server: {
    port: 8080
  },
  // Optional: Silence Sass deprecation warnings. See note below.
  css: {
     preprocessorOptions: {
        scss: {
          silenceDeprecations: [
            'import',
            'mixed-decls',
            'color-functions',
            'global-builtin',
          ],
        },
     },
  },
}
```
Примечание: Предупреждения об устаревании Sass отображаются при компиляции исходных Sass-файлов с последними версиями Dart Sass. Это не препятствует компиляции или использованию Bootstrap. Мы работаем над долгосрочным решением, но пока эти уведомления об устаревании можно игнорировать.

Далее мы заполняем src/index.html. Это HTML-страница, которую Vite загрузит в браузере для использования собранных CSS и JS, которые мы добавим к ней на следующих этапах.

<!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>
    <script type="module" src="./js/main.js"></script>
  </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>
  </body>
</html>

Мы включаем немного стилей Bootstrap здесь с div class="container" и <button>, чтобы мы видели, когда CSS Bootstrap загружается Vite.

Теперь нам нужен npm-скрипт для запуска Vite. Откройте package.json и добавьте скрипт start, показанный ниже (у вас уже должен быть test-скрипт). Мы будем использовать этот скрипт для запуска нашего локального сервера разработки Vite.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
И наконец, мы можем запустить Vite. Из папки my-project в вашем терминале запустите этот ново добавленный npm-скрипт:
```
npm start
```

В следующем и заключительном разделе этого руководства мы импортируем все CSS и JavaScript Bootstrap.

Импорт Bootstrap

Импортируйте CSS Bootstrap. Добавьте следующее в src/scss/styles.scss, чтобы импортировать все исходные файлы Sass Bootstrap.
```
// Import all of Bootstrap’s CSS
@import "bootstrap/scss/bootstrap";
```
Вы также можете импортировать наши таблицы стилей по отдельности, если хотите. Почитайте нашу документацию по импорту Sass для получения подробностей.
Далее мы загружаем CSS и импортируем JavaScript Bootstrap. Добавьте следующее в src/js/main.js, чтобы загрузить CSS и импортировать все JS Bootstrap. Popper будет импортирован автоматически через Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap’s JS
import * as bootstrap from 'bootstrap'
```
Вы также можете импортировать JavaScript-плагины по отдельности по мере необходимости, чтобы уменьшить размеры пакета:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Почитайте нашу документацию по JavaScript для получения дополнительной информации о том, как использовать плагины Bootstrap.
И вы закончили! 🎉 После полной загрузки исходных Sass и JS Bootstrap ваш локальный сервер разработки теперь должен выглядеть так:

Теперь вы можете начать добавлять любые компоненты Bootstrap, которые вы хотите использовать. Обязательно посмотрите полный пример проекта Vite, чтобы узнать, как включить дополнительные пользовательские Sass и оптимизировать сборку, импортируя только те части CSS и JS Bootstrap, которые вам нужны.

Видите что-то неправильное или устаревшее здесь? Пожалуйста, создайте issue на GitHub. Нужна помощь в устранении неполадок? Найдите или начните обсуждение на GitHub.