biti

npm i biti -g

配x該倉庫被棄用 @rola/static和rola項目。

特徵

• 簡單的靜態頁面生成
• 智能文件觀看
• 方便的CLI
• 簡單的節點API

用法

biti watch pages/ static/

入門

biti很簡單。它在一個頁面的單個目錄上運行，每個頁面都定義和導出biti用來渲染頁面的屬性和方法。

對於此處的示例，我們將使用/pages作為我們的頁面目錄，但是您可以將其稱為任何內容。

配置頁面

每個頁面都需要以下導出：

• pathname - 字符串 - 您希望頁面出現的路徑
• view - 函數 - 返回React組件的函數

路徑名屬性將傳遞到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 => { } ) 

執照

麻省理工學院許可©Eric Bailey