in English

เครื่องมือสร้าง

เรียนรู้วิธีใช้สคริปต์ npm ของ Bootstrap เพื่อสร้างเอกสารประกอบ คอมไพล์ซอร์สโค้ด เรียกใช้การทดสอบ และอื่นๆ

การตั้งค่าเครื่องมือ

Bootstrap ใช้สคริปต์ npmสำหรับระบบ บิลด์ package.jsonของเรามีวิธีการที่สะดวกในการทำงานกับเฟรมเวิร์ก รวมถึงการคอมไพล์โค้ด การทดสอบการทำงาน และอื่นๆ

ในการใช้ระบบบิลด์ของเราและเรียกใช้เอกสารของเราในเครื่อง คุณจะต้องมีสำเนาของไฟล์ต้นทางของ Bootstrap และ Node.js ทำตามขั้นตอนเหล่านี้และคุณควรพร้อมที่จะเขย่า:

  1. ดาวน์โหลดและติดตั้ง Node.jsซึ่งเราใช้ในการจัดการการขึ้นต่อกันของเรา
  2. ดาวน์โหลดซอร์สของ Bootstrapหรือfork ที่เก็บ 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. จากไดเร็กทอรี root /bootstrapให้รันnpm run docs-serveในบรรทัดคำสั่ง
  3. เปิดhttp://localhost:9001/ในเบราว์เซอร์ของคุณและ voila

เรียนรู้เพิ่มเติมเกี่ยวกับการใช้ Hugo โดยอ่านเอกสารประกอบ

การแก้ไขปัญหา

หากคุณประสบปัญหาในการติดตั้งการพึ่งพา ให้ถอนการติดตั้งเวอร์ชันการพึ่งพาก่อนหน้าทั้งหมด (ทั่วโลกและในเครื่อง) แล้วรันnpm installใหม่