in English

בניית כלים

למד כיצד להשתמש בתסריטי npm הכלולים של Bootstrap כדי לבנות את התיעוד שלנו, להדר קוד מקור, להריץ בדיקות ועוד.

הגדרת כלי עבודה

Bootstrap משתמש בסקריפטים של npm עבור מערכת הבנייה שלה. ה- package.json שלנו כולל שיטות נוחות לעבודה עם המסגרת, כולל קומפילציה של קוד, הפעלת בדיקות ועוד.

כדי להשתמש במערכת הבנייה שלנו ולהפעיל את התיעוד שלנו באופן מקומי, תזדקק לעותק של קובצי המקור והצומת של Bootstrap. בצע את השלבים הבאים ואתה אמור להיות מוכן לרוק:

  1. הורד והתקן את Node.js , שבו אנו משתמשים כדי לנהל את התלות שלנו.
  2. או להוריד את המקורות של Bootstrap או לחלק את המאגר של Bootstrap .
  3. נווט אל ספריית השורש /bootstrapוהפעל npm installכדי להתקין את התלות המקומית שלנו הרשומה ב- package.json .

לאחר השלמתו, תוכל להפעיל את הפקודות השונות שסופקו משורת הפקודה.

שימוש בסקריפטים של npm

package.json שלנו כולל את הפקודות והמשימות הבאות:

מְשִׁימָה תיאור
npm run dist npm run distיוצר את /dist/הספרייה עם קבצי קומפילציה. משתמש ב- Sass , Autoprefixer ו- terer .
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 ומסיבות יעילות לא מאפשר להתאים אותו.

Autoprefixer

Bootstrap משתמש ב- Autoprefixer (כלול בתהליך הבנייה שלנו) כדי להוסיף אוטומטית קידומות של ספקים לחלק ממאפייני ה-CSS בזמן הבנייה. פעולה זו חוסכת לנו זמן וקוד בכך שהיא מאפשרת לנו לכתוב חלקים מרכזיים מה-CSS שלנו פעם אחת תוך ביטול הצורך במיקסינים של ספקים כמו אלה שנמצאים ב-v3.

אנו שומרים על רשימת הדפדפנים הנתמכים באמצעות Autoprefixer בקובץ נפרד בתוך מאגר GitHub שלנו. ראה .browserslistrc לפרטים.

תיעוד מקומי

הפעלת התיעוד שלנו מקומית דורשת שימוש ב-Hugo, המותקן באמצעות חבילת hugo-bin npm. הוגו הוא מחולל אתרים סטטי מהיר להפליא וניתן להרחבה המספק לנו: כולל כולל, קבצים מבוססי Markdown, תבניות ועוד. הנה איך להתחיל את זה:

  1. הפעל את הגדרת הכלים שלמעלה כדי להתקין את כל התלות.
  2. מספריית השורש /bootstrap, הפעל npm run docs-serveבשורת הפקודה.
  3. פתח http://localhost:9001/בדפדפן שלך, והויל.

למד עוד על השימוש בהוגו על ידי קריאת התיעוד שלו .

פתרון תקלות

אם תיתקל בבעיות בהתקנת תלות, הסר את כל גרסאות התלות הקודמות (גלובליות ומקומיות). לאחר מכן, הפעל מחדש npm install.