generator infinitely static

คงที่อนันต์

นี่คือเครื่องมือสร้างเพจแบบคงที่พร้อมการสนับสนุนพื้นฐานสำหรับการกำหนดเส้นทาง แนวคิดเบื้องหลังเครื่องมือนี้คือการปรับปรุงการพัฒนาหน้าเว็บแบบคงที่ด้วย Webpack ที่ดีที่สุดและเครื่องมือที่เกี่ยวข้อง

มีอะไรบ้าง?

• เครื่องมือ Linting ที่มีค่าเริ่มต้นที่สมเหตุสมผล - stylelint และ eslint
• กำลังโหลดซ้ำร้อนในการพัฒนา
• Babel ที่เปิดใช้งานการตั้งค่าล่วงหน้าของ env ซึ่งดูแล polyfills เช่นกัน
• การลดขนาด JavaScript และการลบโค้ดที่ไม่ทำงาน
• การรวบรวม SASS คำนำหน้า และการลดขนาด
• ไลบรารีสำหรับจัดการเบรกพอยต์สื่อ (media-blender)
• แฮนด์บาร์เป็นภาษาเทมเพลต (พร้อมตัวช่วย เค้าโครง และบางส่วน)
• รองรับเส้นทาง (โครงสร้างแบบเรียบและแบบซ้อน)

เริ่มต้นใช้งาน

การเรียกใช้สิ่งนี้เป็นเรื่องง่ายจริงๆ คุณจะต้องมีเครื่องกำเนิดไฟฟ้านี้และติดตั้ง yo

npm install -g yo generator-infinitely-static
mkdir my-project
cd my-project
git init
yo infinitely-static

หมายเหตุ : หลังจากเริ่มต้นโปรเจ็กต์แล้ว ให้รัน npm install husky --save-dev

การพัฒนา

เมื่อ Yeoman เสร็จสิ้น คุณมีโปรเจ็กต์การทำงาน

กำลังใช้งานเซิร์ฟเวอร์โหลดซ้ำแบบร้อนแรง

 npm start

การผลิตสร้าง

 npm run build

เส้นทาง

การเพิ่มเส้นทางก็ทำได้ง่ายเช่นกัน ในรูทของโปรเจ็กต์ คุณจะพบ routes.json ซึ่งมีเส้นทาง index เริ่มต้น การกำหนดค่าเส้นทางยังรองรับข้อมูลการซ้อนและเทมเพลตอีกด้วย

 {
  "index" : { // points to the template file in app/templates/pages/index.hbs
    "route" : "/" , // don't forget the trailing slash
    "context" : { // data that you can use in the page
      "user" : {
        "name" : "Super user"
      }
    }
  } ,
  "contact" : {
    "route" : "contact/me/" // will generate nested routes
    }
  }
}

หลังจากนั้น ในเทมเพลตของคุณ คุณสามารถใช้ตัวช่วย {{linkTo}} ที่รวมไว้ดังนี้:

 < a href =" {{linkTo 'index'}} " > Home </ a >

และสำหรับข้อมูลผู้ใช้ คุณสามารถใช้ตัวช่วย getDataAsString :

 < h1 > {{getDataAsString 'user.name'}} </ h1 >

หากข้อมูลเป็นแบบธรรมดา (อาร์เรย์ สตริง ตัวเลข ฯลฯ) ข้อมูลนั้นก็จะแสดงตามปกติ แต่หากคุณอ้างอิงออบเจ็กต์ คุณจะได้รับ JSON ที่เป็นสตริง แต่อย่าลืมว่าสามารถเข้าถึงข้อมูลได้โดยตรงโดยใช้ออบเจ็กต์ htmlWebpackPlugin.options ในเทมเพลต:

 < h1 > {{htmlWebpackPlugin.options.context.user.name}} </ h1 >

ด้วยวิธีนี้คุณสามารถวนซ้ำผ่านอาร์เรย์ที่ระบุในบริบทโดยใช้ตัวช่วยบิลด์อิน

ใบอนุญาต

ใบอนุญาตเอ็มไอที

© 2016 อินฟินัม อิงค์