Перейти к основному содержанию Перейти к навигации по документации
Оригинал Посмотреть на GitHub

Инструменты сборки

Узнайте, как использовать включенные в Bootstrap сценарии npm для создания нашей документации, компиляции исходного кода, запуска тестов и многого другого.

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

Настройка инструмента

Bootstrap использует сценарии npm для своей системы сборки. Наш package.json включает удобные методы для работы с фреймворком, включая компиляцию кода, запуск тестов и другое.

Чтобы использовать нашу систему сборки и запускать нашу документацию локально, Вам понадобится копия исходных файлов Bootstrap и Node. Выполните следующие шаги, и Вы должны быть готовы к игре:

  1. Загрузите и установите Node.js, который мы используем для управления нашими зависимостями.
  2. Либо загрузите исходные коды Bootstrap, либо сделайте “форк” репозитория Bootstrap.
  3. Перейдите в корневой каталог /bootstrap и запустите npm install, чтобы установить наши локальные зависимости, перечисленные в package.json.

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

Использование скриптов npm

Наш package.json включает множество задач для разработки проекта. Запустите npm run, чтобы увидеть все сценарии npm в Вашем терминале. Основные задачи включают:

Задача Описание
npm start Компилирует CSS и JavaScript, создает документацию и запускает локальный сервер.
npm run dist Создает каталог dist/ с скомпилированными файлами. Требуется Sass, Autoprefixer, и terser.
npm test Выполняет тесты локально после запуска npm run dist
npm run docs-serve Создает и запускает документацию локально.
Начните работу с Bootstrap через npm с помощью нашего начального проекта! Перейдите в репозиторий шаблонов twbs/bootstrap-npm-starter, чтобы узнать, как создать и настроить Bootstrap в своем собственном проекте npm. Включает компилятор Sass, Autoprefixer, Stylelint, PurgeCSS и иконки Bootstrap.

Sass

Bootstrap использует Dart Sass для компиляции наших исходных файлов Sass в файлы CSS (включенные в наш процесс сборки), и мы рекомендуем Вам сделать то же самое, если Вы компилируете Sass с использованием собственного конвейера активов. Ранее мы использовали Node Sass для Bootstrap v4, но LibSass и пакеты, созданные на его основе, включая Node Sass, теперь устарели.

Dart Sass использует точность округления 10 и из соображений эффективности не позволяет изменять это значение. Мы не снижаем эту точность во время дальнейшей обработки нашего сгенерированного CSS, например, во время минификации, но если Вы решите это сделать, мы рекомендуем поддерживать точность не менее 6, чтобы предотвратить проблемы с округлением в браузере.

Автопрефиксер

Bootstrap использует Autoprefixer (включенный в наш процесс сборки) для автоматического добавления префиксов поставщиков к некоторым свойствам CSS во время сборки. Это экономит время и код, позволяя писать ключевые части нашего CSS за один раз, устраняя при этом необходимость в миксинах от поставщиков, подобных тем, что есть в v3.

Мы храним список браузеров, поддерживаемых с помощью Autoprefixer, в отдельном файле в нашем репозитории GitHub. См. .browserslistrc для получения дополнительной информации.

RTLCSS

Bootstrap использует RTLCSS для обработки скомпилированного CSS и преобразования их в RTL - в основном заменяя свойства, учитывающие горизонтальное направление (например, padding-left), их противоположностью. Это позволяет нам писать наш CSS только один раз и вносить незначительные изменения с помощью RTLCSS директив control и value.

Локальная документация

Для локального запуска нашей документации требуется использование Hugo, который устанавливается через пакет npm hugo-bin. Hugo - это невероятно быстрый и достаточно расширяемый генератор статических сайтов, который предоставляет нам: базовые включения, файлы на основе Markdown, шаблоны и многое другое. Вот как это начать:

  1. Выполните настройку инструментов выше, чтобы установить все зависимости.
  2. Из корневого каталога /bootstrap, запустите npm run docs-serve в командной строке.
  3. Откройте http://localhost:9001/ в вашем браузере и вуаля.

Узнайте больше об использовании Hugo, прочитав его документацию.

Исправление проблем

Если у Вас возникнут проблемы с установкой зависимостей, удалите все предыдущие версии зависимостей (глобальные и локальные). Затем перезапустите npm install.