biti

npm i biti -g

repo นี้เลิกใช้เพื่อสนับสนุน @Rola/Static และโครงการ Rola

คุณสมบัติ

• การสร้างหน้าเว็บแบบคงที่ง่าย
• การดูไฟล์อัจฉริยะ
• CLI ที่สะดวก
• Easy Node API

การใช้งาน

biti watch pages/ static/

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

biti ค่อนข้างง่าย มันทำงานบนไดเรกทอรีเดียวของหน้าเว็บซึ่งแต่ละตัวกำหนดและส่งออกคุณสมบัติและวิธีการที่ biti ใช้ในการแสดงหน้า

สำหรับตัวอย่างที่นี่เราจะใช้ /pages เป็นไดเรกทอรีหน้าเว็บของเรา แต่คุณสามารถเรียกมันได้อะไรก็ได้

การกำหนดค่าหน้า

แต่ละหน้าต้องการการส่งออกต่อไปนี้:

• pathname - String - เส้นทางที่คุณต้องการให้หน้าปรากฏ
• view - ฟังก์ชั่น - ฟังก์ชั่นที่ส่งคืนส่วนประกอบปฏิกิริยา

คุณสมบัติ PathName จะถูกส่งผ่านไปยังองค์ประกอบ view

หน้าง่ายอาจมีลักษณะเช่นนี้:

 import React from 'react'

export const pathname = '/about'

export function view ( { pathname } ) {
  return (
    < >
      < h1 > About Us </ h1 >
      < p > ... </ p >
    </ >
  )
} 

ข้อมูลคงที่

หน้าสามารถส่งออกวัตถุ state ซึ่งจะถูกส่งผ่านไปยังฟังก์ชั่น view เมื่อแสดงผล

 import React from 'react'

export const pathname = '/about'

export const state = {
  title : 'About Us' ,
  description : '...'
}

export function view ( { state , pathname } ) {
  return (
    < >
      < h1 > { state . title } </ h1 >
      < p > { state . description } </ p >
    </ >
  )
} 

กำลังโหลดข้อมูล

เส้นทางที่ต้องการข้อมูลหรือเส้นทางที่ต้องการคุณสมบัติแบบไดนามิกสามารถกำหนดฟังก์ชั่น config ที่ ส่งคืน การกำหนดค่าหน้าเว็บที่มีคุณสมบัติเดียวกันที่ระบุไว้ข้างต้น

ค่าเหล่านี้จะถูก รวมเข้าด้วยกันอย่างลึกซึ้ง กับการส่งออกแบบคงที่

 import React from 'react'
import { getAboutPage } from './lib/api.js'

export const pathname = '/about'

export const state = {
  title : 'About Us' ,
  team : [
    'Eric'
  ]
}

export function config ( ) {
  return getAboutPage ( )
    . then ( res => {
      return {
        state : {
          team : res . team
        }
      }
    } )
}

export function view ( { state , pathname } ) {
  return (
    < >
      < h1 > { state . title } </ h1 >

      < h2 > Team </ h2 >

      { state . team . map ( name => (
        < p key = { name } > { name } </ p >
      ) ) }
    </ >
  )
} 

การสร้างหน้าจากข้อมูลที่โหลด

สำหรับหน้าทั่วไปและการปนเปื้อนฟังก์ชั่น config ยังสามารถส่งคืนอาร์เรย์ของการกำหนดค่าหน้า แต่ละการกำหนดค่าเหล่านี้ควรกำหนด pathname ของตัวเองเพื่อให้แต่ละหน้ามีการแสดงผลแยกกัน

ตัวอย่างต่อไปนี้จะสร้างหน้าสำหรับแต่ละโพสต์ที่ส่งคืนจาก getBlogPosts :

 import React from 'react'
import { getBlogPosts } from './lib/api.js'

export function config ( ) {
  return getBlogPosts ( )
    . then ( posts => {
      return posts . map ( post => ( {
        pathname : `/posts/ ${ post . slug } ` ,
        state : {
          title : post . title ,
          content : post . content
        }
      } ) )
    } )
}

export function view ( { state , pathname } ) {
  return (
    < >
      < h1 > { state . title } </ h1 >

      < article >
        { state . content }
      </ article >
    </ >
  )
} 

การกำหนดค่า

biti รองรับการกำหนดค่าขั้นต่ำและไม่เช่นนั้นจะกลับไปเป็นค่าเริ่มต้นอัจฉริยะ ในการกำหนดค่าการกำหนดค่าสำหรับงานการเรนเดอร์ทั้งหมดคุณสามารถสร้างไฟล์ biti.config.js

biti รองรับคุณสมบัติต่อไปนี้ในไฟล์กำหนดค่า:

• env - วัตถุ - คุณสมบัติของวัตถุนี้จะถูกแนบกับ process.env รวมถึงที่กำหนด ทั่วโลก ภายในการรวบรวม
• alias - วัตถุ - นามแฝงการนำเข้าโมดูล

ตัวอย่าง:

 module . exports = {
  env : {
    API_KEY : 'abcdefg'
  } ,
  alias : {
    components : './src/components'
  }
} 

กำหนดค่าเริ่มต้น

โดยค่าเริ่มต้น biti จะกำหนดนามแฝง @ เดียวที่ชี้ไปที่ process.cwd() คุณสามารถใช้มันได้ตลอดเทมเพลตของคุณ:

 import Component from '@/src/components/Component.js' 

CLI

biti มีเพียงสองคำสั่ง: render และ watch

ทั้งสองทำตามรูปแบบเดียวกัน:

biti < command > < src > < dest >

ตัวอย่างเช่น:

biti render /pages /static

คำสั่งเหล่านี้ยังยอมรับ Globs เป็นคุณสมบัติ src ช่วยให้คุณสามารถระบุหน้าหรือไดเรกทอรีแต่ละหน้า

biti render /pages/about-us.js /static
biti render /pages/ * .js /static
biti render /pages/marketing-site/ * .js /static
biti render /pages/ ** / * .js /static

API

การใช้ biti โดยทางโปรแกรมนั้นแทบจะเหมือนกับการใช้ CLI คุณจะต้องผ่านวัตถุการกำหนดค่าของคุณด้วยตนเอง

 const biti = require ( 'biti' )

const config = {
  env : { ... } ,
  alias : { ... }
}

const app = biti ( config )

ทั้ง render และ watch มีลายเซ็นต่อไปนี้:

 app . render ( src , dest ) 

ทำให้

แสดงผลทุกหน้าจาก src dest

 app . render ( '/src' , '/static' ) 

ดู

ดูทุกหน้าใน src และแสดงผลเพื่อ dest เปลี่ยนไฟล์

 app . watch ( '/src' , '/static' )

กิจกรรม API

อินสแตนซ์ของ biti ปล่อยเหตุการณ์ที่เป็นประโยชน์สองสามอย่างเช่นกัน

ทำให้

หลังจากเรนเดอร์หน้าเดียว

 app . on ( 'render' , page => { } ) 

การแสดงผล

หลังจากแสดงผลทุกหน้า ในการเฝ้าดูสิ่งนี้เรียกว่าหลังจากการเปลี่ยนแปลงทุกครั้งได้รับการรวบรวมและแสดงผล

 app . on ( 'rendered' , pages => { } ) 

ข้อผิดพลาด

 app . on ( 'error' , error => { } ) 

ใบอนุญาต

ใบอนุญาต MIT © Eric Bailey