in English

Будівельні інструменти

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

На цій сторінці

Налаштування інструменту

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

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

Завантажте та встановіть Node.js , який ми використовуємо для керування нашими залежностями.
Або завантажте вихідні коди Bootstrap, або розгалужте репозиторій Bootstrap .
Перейдіть до кореневого /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 один раз, усуваючи потребу в міксинах постачальників, подібних до тих, що є у v3.

Ми зберігаємо список браузерів, які підтримуються через Autoprefixer, в окремому файлі в нашому репозиторії GitHub. Дивіться .browserslistrc для деталей.

RTLCSS

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

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

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

Виконайте описані вище налаштування інструментів, щоб установити всі залежності.
З кореневого /bootstrapкаталогу запустіть npm run docs-serveу командному рядку.
Відкрийте http://localhost:9001/у своєму браузері, і вуаля.

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

Вирішення проблем

Якщо у вас виникнуть проблеми зі встановленням залежностей, видаліть усі попередні версії залежностей (глобальні та локальні). Потім запустіть повторно npm install.