stakit

สเตกิต

ชุดเครื่องมือแบบแยกส่วนสำหรับการสร้างเว็บไซต์แบบคงที่

Stakit เป็นเฟรมเวิร์กที่ช่วยให้คุณสร้างไปป์ไลน์การสร้างที่มีประสิทธิภาพสำหรับเว็บไซต์แบบคงที่โดยไม่ทำให้เหนื่อย มันเรียบง่ายและเป็นโมดูล ใช้สตรีมและชุดเครื่องมือ Stakit มีปลั๊กอินและการแปลงมากมายที่คุณสามารถใช้ได้

Stakit ยังอยู่ในช่วงเริ่มต้นของการพัฒนา แต่คุณสามารถนำไปใช้เพื่อดูว่าคุณควรสนใจมันหรือไม่

คุณสมบัติ

• ผู้ไม่เชื่อเรื่องพระเจ้ากรอบงาน : ทำงานร่วมกับกรอบงานใด ๆ ที่สามารถส่งออกสตริงได้

• โมดูลาร์ : คุณไม่เคยมีสิ่งที่คุณไม่ต้องการ แต่คุณสามารถ npm install

• API ขนาดเล็ก : มีเพียง 7 วิธีหลักเท่านั้น คุณต้องใช้เพียง 3 วิธีเท่านั้น

• ไม่มีข้อจำกัด : คุณจะไม่ถูกจำกัดด้วยฟีเจอร์และเทมเพลตของโปรแกรมสร้างไซต์คงที่

• รวดเร็ว หน่วยความจำมีประสิทธิภาพ : ใช้สตรีมอย่างหนัก

การติดตั้ง

npm i stakit

ตัวอย่าง

 var stakit = ต้องการ('stakit')var { เรนเดอร์, ไฮเดรต } = ต้องการ('stakit-choo')var app = ต้องการ('.')var kit = stakit()
  .routes (ฟังก์ชัน (สถานะ) {return [ '/' ]
  -
  .render(เรนเดอร์(แอป))
  .transform (ไฮเดรต) kit.output (stakit.writeFiles ('./public'))

ทำไม

โดยทั่วไป คุณจะทำ 2 สิ่งเมื่อสร้างไซต์แบบคงที่:

• เติม เนื้อหา บางส่วนให้กับ แอป ของคุณ

• คัดลอก ไฟล์ แบบคงที่

มีเครื่องมือแบบโมดูลาร์ (และน่ารัก) มากมายสำหรับการรวม Javascript หรือการแปลง CSS Stakit เป็นสิ่งที่คล้ายกัน แต่สำหรับไซต์เต็ม และเน้นไปที่ไฟล์ HTML โดยเฉพาะ

คุณจะต้องจัดการชุดรวมแอปของคุณและรวมชุดรวมด้วยหากนั่นคือสิ่งที่คุณต้องการ ตามปรัชญาของ Choo มันมีขนาดเล็ก เข้าใจได้ และใช้งานง่าย ได้รับการออกแบบมาเพื่อทำงานกับ Choo เป็นหลัก แต่ควรทำงานร่วมกับเฟรมเวิร์ก isomorphic อื่นๆ ด้วย

การใช้งาน

Stakit ถูกเรียกโดยทางโปรแกรม ไม่ใช่จากบรรทัดคำสั่ง ดังนั้น คุณจะต้องมีไฟล์ Javascript (เช่น build.js ) ในตำแหน่งที่คุณต้องการ หลังจากนั้นคุณสามารถเริ่มต้น kit ด้วย stakit() จากนั้นโยงวิธีการสองสามวิธี

ต้องมีสองวิธีในไปป์ไลน์:

• routes(fn)

• render(fn)

วิธีการอื่นทั้งหมดเป็นทางเลือกและเรียกตามลำดับต่อไปนี้:

1. มิดเดิลแวร์ทั้งหมดที่ใช้โดย kit.use()

2. ฟังก์ชัน routesReducer ที่ใช้

3. สำหรับทุกเส้นทาง:

1. การเรียกเพียงครั้งเดียวไปยัง renderer ที่ใช้

2. transform สายทั้งหมด

สิ้นสุดไปป์ไลน์ด้วย kit.output()

เอพีไอ

ส่วนนี้จะแสดงเอกสารเกี่ยวกับวิธีการทำงานแต่ละฟังก์ชันใน Stakit มีวัตถุประสงค์เพื่อเป็นข้อมูลอ้างอิงทางเทคนิค

kit = stakit()

เริ่มต้นอินสแตน kit ใหม่

kit.html(template, selector)

ตั้งค่าเทมเพลต HTML เริ่มต้นและตัวเลือก

kit.use(fn(context))

พุชมิดเดิลแวร์ / ปลั๊กอินไปยังรายการมิดเดิลแวร์ ฟังก์ชันวัตถุประสงค์ทั่วไปจะทำงานก่อนการสร้างเส้นทาง คุณสามารถแก้ไขบริบทตามที่คุณต้องการ ตั้งแต่การเปลี่ยน state ไปจนถึงการติดตั้ง transform

 kit.use (ฟังก์ชั่น (ctx) {
  ctx._transforms.push(แปลง)})

ดูมิดเดิลแวร์สำหรับข้อมูลเพิ่มเติม

kit.routes(routeReducer(state))

routeReducer เป็นฟังก์ชันที่ได้รับ context.state เป็นพารามิเตอร์และส่งกลับ Array ของสตริง/เส้นทาง นี่คือเส้นทางที่ Stakit จะเรียกใช้ render

 kit.routes (ฟังก์ชัน (สถานะ) {
  กลับ Object.keys (state.content)
  // หรือแบบคงที่
  กลับ [ '/', '/เกี่ยวกับ', '/บล็อก' ]})

kit.render(renderer(route, state))

ตั้งค่าตัวเรนเดอร์ของบิลด์ นี่คือจุดที่ความมหัศจรรย์เกิดขึ้น renderer จะถูกเรียกสำหรับทุกเส้นทางที่ส่งคืนโดย routes

จะต้องส่งคืนวัตถุด้วยค่าต่อไปนี้:

 -
  html: string, // ผลลัพธ์ของการเรนเดอร์
  state: object // สถานะหลังการเรนเดอร์ (ไม่บังคับ)}

การแปลงจะได้รับสถานะที่อัปเดตซึ่งส่งคืนที่นี่

kit.transform(transformFn, opts)

พุชการแปลงไปยังรายการการแปลง Stakit ใช้ documentify และ streams เพื่อสร้าง HTML

สิ่งเหล่านี้ถูกเรียกหลังจากแทนที่เนื้อหาที่แสดงผลใน HTML แล้ว

ดูการแปลงสำหรับข้อมูลเพิ่มเติม

kit.output(writerObject)

เริ่มต้น build ไปป์ไลน์และสิ้นสุดด้วยการส่งผ่านเส้นทางทั้งหมดไปยัง writerObject.write({ destination, stream }) ส่งคืน Promise ที่รอจนกว่าไฟล์ทั้งหมด (เส้นทางและสแตติก) จะถูกเขียนอย่างสมบูรณ์

ตามค่าเริ่มต้น จะใช้ Writer ที่ส่งออกไซต์ไปยังไดเร็กทอรี ./public public

ดูนักเขียนสำหรับข้อมูลเพิ่มเติม

มิดเดิลแวร์

มิดเดิลแวร์ในตัว:

stakit.state(extendState)

ยูทิลิตี้ที่จะช่วยคุณในการเพิ่มค่าให้กับ context.state

 kit.use(stakit.state({ ข้อความ: 'สวัสดีตอนเช้า!' }))

stakit.copy(files)

มิดเดิลแวร์สำหรับการคัดลอกไฟล์ไปยังไดเร็กทอรีเอาต์พุต

 // คัดลอกไฟล์ไปยังตำแหน่งเดียวกัน kit.use(stakit.copy([ 'robots.txt' ]))// คัดลอกไฟล์ไปยังตำแหน่งอื่นภายในเอาต์พุต pathkit.use(stakit.copy({
  'robots.txt': 'robots.txt',
  'sitemap.xml': 'sitemaps/sitemap.xml'}))

แปลงร่าง

Documentify มีประสิทธิภาพมากและสามารถปรับได้อย่างง่ายดาย รูปแบบทั่วไปของการแปลง Stakit คือ:

 // ห่อด้วย functionfunction lang (บริบท) {
  // ส่งคืนการแปลงเอกสาร
  ฟังก์ชั่น return (lang) {// ส่งคืนกระแสการแปลง ส่งคืน hstream ({ html: { lang: lang } })
  -

หมายเหตุ: hstream เป็นเพื่อนที่ดีมาก!

การแปลง documentify ถูกรวมไว้ในฟังก์ชัน ดังนั้นเราจึงสามารถรับ context เมื่อเราต้องการ โดยไม่ต้องยุ่งกับ API ของ documentify หากคุณต้องการหลีกเลี่ยงสิ่งนี้ คุณสามารถคืนค่าการแปลง documentify จากฟังก์ชันได้

ดูว่าการเปลี่ยนแปลงใดที่มาพร้อมกับ Stakit ใน transforms/readme.md

นักเขียน

ผู้เขียนส่งออกไฟล์สแตติกที่สร้างขึ้นและแปลงแล้ว สิ่งนี้อาจแตกต่างกันไปตั้งแต่การส่งออกไปยังระบบไฟล์ไปจนถึงการใส่ลงในไฟล์เก็บถาวร Dat

ผู้เขียนจะต้องใช้วิธีการ: write . สำหรับทุกไฟล์ รวมถึงเพจที่สร้างขึ้น + ไฟล์ที่เพิ่มใน context._files , writer.write จะถูกเรียกพร้อมกับอ็อบเจ็กต์ไฟล์ ควรส่งคืน Promise ที่ส่งคืนหลังจากไปป์ถูกล้าง (ไฟล์ถูกเขียนอย่างสมบูรณ์)

วัตถุไฟล์มีลักษณะดังนี้:

{
  source: null | string,
  destination: string,
  stream: Stream
}

ขอแนะนำให้ล้างไดเร็กทอรีเอาต์พุตก่อนทุกบิลด์

ดูตัวอย่างเมธอด stakit.writeFiles ในตัว

นั่นคือทั้งหมดที่เกี่ยวกับนักเขียน

ดูเพิ่มเติม

• choo - เฟรมเวิร์กส่วนหน้าขนาด 4kb ที่แข็งแกร่ง

• documentify - ตัวรวม HTML แบบโมดูลาร์

• jalla - เว็บคอมไพเลอร์และเซิร์ฟเวอร์ที่รวดเร็วปานสายฟ้าในหนึ่งเดียว (ขอบคุณสำหรับข้อมูลโค้ดจำนวนมาก!)