Перейти к основному содержанию Перейти к навигации по документам
in English

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

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

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

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

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.

Сасс

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

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

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

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

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

РТЛКС

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

Местная документация

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

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

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

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

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