biti

npm i biti -g

️ تم إهمال هذا الريبو لصالح @rola/static ومشروع Rola.

سمات

• توليد صفحات ثابتة سهلة
• مراقبة الملف الذكي
• CLI مريحة
• سهل العقدة API

الاستخدام

biti watch pages/ static/

ابدء

biti بسيط جدا. تعمل على دليل واحد من الصفحات ، والتي يحدد كل منها وتصدير الخصائص والأساليب التي يستخدمها biti لتقديم الصفحة.

بالنسبة للأمثلة هنا ، سنستخدم /pages كدليل صفحاتنا ، ولكن يمكنك تسميته أي شيء.

تكوين صفحة

تتطلب كل صفحة الصادرات التالية:

• pathname - String - المسار الذي ترغب في ظهور الصفحة
• view - وظيفة - وظيفة تُرجع مكون رد الفعل

سيتم تمرير خاصية اسم المسار إلى مكون 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 => { } ) 

رخصة

رخصة معهد ماساتشوستس للتكنولوجيا © إريك بيلي