Инструменты сборки
Узнайте, как использовать скрипты npm, включенные в Bootstrap, для создания нашей документации, компиляции исходного кода, запуска тестов и многого другого.
Настройка инструментов
Bootstrap использует скрипты npm для своей системы сборки. В наш package.json включены удобные методы работы с фреймворком, в том числе компиляция кода, запуск тестов и многое другое.
Чтобы использовать нашу систему сборки и запускать нашу документацию локально, вам потребуется копия исходных файлов Bootstrap и Node. Выполните следующие шаги, и вы должны быть готовы к року:
- Загрузите и установите Node.js , который мы используем для управления нашими зависимостями.
- Либо загрузите исходники Bootstrap, либо разветвите репозиторий Bootstrap .
- Перейдите в корневой
/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 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, шаблоны и многое другое. Вот как это сделать:
- Выполните описанную выше настройку инструментов, чтобы установить все зависимости.
- Из корневого
/bootstrap
каталога запуститеnpm run docs-serve
в командной строке. - Откройте
http://localhost:9001/
в браузере и вуаля.
Узнайте больше об использовании Hugo, прочитав его документацию .
Исправление проблем
Если у вас возникнут проблемы с установкой зависимостей, удалите все предыдущие версии зависимостей (глобальные и локальные). Затем перезапустите npm install
.