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