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 dist npm run distсоздает /dist/каталог с скомпилированными файлами. Использует Sass , Autoprefixer и terser .
npm test Запускает тесты локально после запускаnpm run dist
npm run docs-serve Создает и запускает документацию локально.

Запустите npm run, чтобы увидеть все сценарии npm.

Начните работу с Bootstrap через npm с нашим стартовым проектом! Перейдите в репозиторий шаблонов twbs /bootstrap-npm-starter , чтобы узнать, как создать и настроить Bootstrap в своем собственном проекте npm. Включает компилятор Sass, Autoprefixer, Stylelint, PurgeCSS и значки Bootstrap.

Сасс

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

Если вам требуются более новые функции Sass или совместимость с новыми стандартами CSS, Dart Sass теперь является основной реализацией Sass и поддерживает API JavaScript, полностью совместимый с Node Sass (за некоторыми исключениями, перечисленными на странице Dart Sass на GitHub ).

Мы увеличиваем точность округления Sass до 6 (по умолчанию это 5 в Node Sass), чтобы предотвратить проблемы с округлением в браузере. Если вы используете Dart Sass, это не нужно настраивать, поскольку этот компилятор использует точность округления 10 и по соображениям эффективности не позволяет настраивать ее.

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

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

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

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

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

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

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

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

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