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 і підтримує JavaScript API, який повністю сумісний із Node Sass (за кількома винятками, переліченими на сторінці GitHub Dart Sass ).

Ми підвищуємо точність округлення Sass до 6 (за замовчуванням це 5 у Node Sass), щоб запобігти проблемам із округленням у браузері. Якщо ви використовуєте Dart Sass, вам не потрібно буде коригувати це, оскільки цей компілятор використовує точність округлення 10 і з міркувань ефективності не дозволяє її коригувати.

Автопрефікс

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

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

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

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

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

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

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

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