Bootstrap и Parcel

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

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

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

Что такое Parcel?

Parcel — это сборщик веб-приложений, разработанный для упрощения процесса разработки с нулевой конфигурацией из коробки. Он предлагает функции, которые можно найти в более продвинутых сборщиках, одновременно сосредотачиваясь на простоте использования, что делает его идеальным для разработчиков, стремящихся к быстрому старту.

Настройка

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

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

Теперь, когда у нас установлены все необходимые зависимости, мы можем приступить к созданию файлов проекта и импорту 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

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

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

На этом этапе все находится в нужном месте, но Parcel нужна HTML-страница и npm-скрипт для запуска нашего сервера.

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

После установки зависимостей и готовности папки проекта к началу кодирования, мы теперь можем настроить Parcel и запустить наш проект локально. Parcel по замыслу не требует файла конфигурации, но нам нужен npm-скрипт и HTML-файл для запуска нашего сервера.

Заполните файл src/index.html. Parcel нужна страница для отображения, поэтому мы используем нашу страницу index.html для настройки базового HTML, включая наши CSS и JavaScript-файлы.
```
<!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>
```
Мы включаем немного стилей Bootstrap здесь с div class="container" и <button>, чтобы мы видели, когда CSS Bootstrap загружается Parcel.

Parcel автоматически обнаружит, что мы используем Sass, и установит плагин Sass Parcel для его поддержки. Однако, если вы хотите, вы также можете вручную выполнить npm i --save-dev @parcel/transformer-sass.
Добавьте npm-скрипты Parcel. Откройте package.json и добавьте следующий скрипт start в объект scripts. Мы будем использовать этот скрипт для запуска нашего сервера разработки Parcel и отображения HTML-файла, который мы создали после его компиляции в каталог dist.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
И наконец, мы можем запустить Parcel. Из папки my-project в вашем терминале запустите этот ново добавленный npm-скрипт:
```
npm start
```

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

Импорт Bootstrap

Импорт Bootstrap в Parcel требует двух импортов: одного в наш styles.scss и одного в наш main.js.

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

Опционально: Вы можете увидеть предупреждения об устаревании Sass с последними версиями Dart Sass. Их можно отключить, добавив следующую конфигурацию в файл .sassrc.js в корневой папке со следующим:
```
module.exports = {
  silenceDeprecations: ['import', 'mixed-decls', 'color-functions', 'global-builtin']
}
```
Импортируйте JS Bootstrap. Добавьте следующее в src/js/main.js, чтобы импортировать все JS Bootstrap. Popper будет импортирован автоматически через Bootstrap.
```
// 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, которые вы хотите использовать. Обязательно посмотрите полный пример проекта Parcel, чтобы узнать, как включить дополнительные пользовательские Sass и оптимизировать сборку, импортируя только те части CSS и JS Bootstrap, которые вам нужны.

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