Перейти к основному содержанию

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

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

Содержание

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

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

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

  1. Загрузите и установите Node.js , который мы используем для управления нашими зависимостями.
  2. Перейдите в корневой /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 Создает и запускает документацию локально.

Autoprefixer

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

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

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

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

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

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

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

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