用于构建静态网站的模块化工具包
Stakit 是一个框架,可帮助您轻松构建静态网站的强大构建管道。它是最小的和模块化的,使用流,并且 Stakit 工具包有很多您可以使用的插件和转换。
Stakit 仍处于开发早期,但您可以使用它来看看是否应该关心它。
与框架无关:适用于任何可以输出字符串的框架
模块化:你永远不会拥有不需要的东西,但你可以npm install
它
小 api :它只有 7 个核心方法,只有 3 个是你必须使用的
无限制:您永远不会受到静态站点生成器的功能和模板的限制
快速、内存高效:大量使用流
npm i stakit
var stakit = require('stakit')var { 渲染, 水合物 } = require('stakit-choo')var app = require('.')var kit = stakit() .routes(函数 (状态) {return [ '/' ] }) .渲染(渲染(应用程序)) .transform(水合物)kit.output(stakit.writeFiles('./public'))
一般来说,生成静态站点时需要做两件事:
用一些内容填充您的应用程序
复制静态文件
有许多模块化(且可爱的)工具可用于捆绑 Javascript 或转换 CSS,Stakit 是类似的工具,但适用于完整站点,并且特别关注 HTML 文件。
您必须处理应用程序的捆绑,并包含捆绑包(如果您需要的话)。遵循 Choo 的理念,它体积小、易于理解且易于使用。它被设计为主要与 Choo 一起使用,但它也应该与其他同构框架一起使用。
Stakit 以编程方式调用,而不是从命令行调用,因此您需要一个 Javascript 文件(如build.js
)。之后,您可以使用stakit()
初始化套件,然后链接几个方法。
管道中必须出现两个方法:
routes(fn)
render(fn)
所有其他方法都是可选的,并按以下顺序调用:
kit.use()
应用的所有中间件
应用的routesReducer
函数
对于每条路线:
对应用的renderer
一次调用
所有transform
调用
使用kit.output()
结束管道。
本节提供有关 Stakit 中每个函数如何工作的文档。它旨在作为技术参考。
kit = stakit()
初始化一个新的kit
实例。
kit.html(template, selector)
设置起始 HTML 模板和选择器。
kit.use(fn(context))
将中间件/插件推送到中间件列表,通用功能在路由生成之前运行。您可以以任何您想要的方式修改上下文,从更改state
到安装transform
。
套件.use(函数(ctx){ ctx._transforms.push(变换)})
有关更多信息,请参阅中间件。
kit.routes(routeReducer(state))
routeReducer
是一个获取context.state
作为参数并返回字符串/路由Array
的函数。这些是 Stakit 将调用render
的路由。
kit.routes(函数(状态){ 返回 Object.keys(状态.内容) // 或静态地 返回 ['/', '/about', '/blog']})
kit.render(renderer(route, state))
设置构建的渲染器。这就是奇迹发生的地方。将为routes
返回的每个路由调用renderer
。
它必须返回一个具有以下值的对象:
{ html: string, // 渲染结果 state: object // 渲染后的状态(可选)}
转换将接收此处返回的更新状态。
kit.transform(transformFn, opts)
将转换推送到转换列表。 Stakit 使用documentify
和 Streams 来构建 HTML。
在 HTML 中替换呈现的内容后调用它们。
有关详细信息,请参阅变换。
kit.output(writerObject)
启动构建管道并通过将所有路由传递给writerObject.write({ destination, stream })
来结束构建管道。返回一个Promise
,等待所有文件(路由和静态)完全写入。
默认情况下,它使用 Writer 将站点输出到./public
目录。
请参阅作家了解更多信息。
内置中间件:
stakit.state(extendState)
帮助您向context.state
添加值的实用程序
kit.use(stakit.state({ message: '早上好!' }))
stakit.copy(files)
用于将文件复制到输出目录的中间件。
// 将文件复制到同一位置kit.use(stakit.copy([ 'robots.txt' ]))// 将文件复制到输出路径中的不同位置kit.use(stakit.copy({ '机器人.txt': '机器人.txt', 'sitemap.xml': 'sitemaps/sitemap.xml'}))
Documentify
非常强大并且可以轻松模块化。 Stakit 变换的一般格式为:
// 包装在函数中 function lang (context) { // 返回文档化转换 return function (lang) {// 返回一个转换流return hstream({ html: { lang: lang } }) }}
注: hstream
是一个很好的朋友!
documentify
转换包装在一个函数中,因此我们可以在需要时获取context
,而不会干扰documentify
的 API。如果你想绕过这个,你可以简单地从函数返回documentify
转换。
在transforms/readme.md
中查看 Stakit 附带的转换。
编写器输出生成的、转换后的静态文件。这可能会有所不同,从输出到文件系统到将它们放入 Dat 存档中。
作者必须实现一个方法: write
。对于每个文件,包括生成的页面+添加到context._files
文件, writer.write
将使用文件对象调用。它应该返回一个Promise
,该 Promise 在管道被刷新(文件被完全写入)后返回。
文件对象如下所示:
{ source: null | string, destination: string, stream: Stream }
建议在每次构建之前清理输出目录。
以内置stakit.writeFiles
方法为例。
这就是作家的全部。
choo - 坚固的 4kb 前端框架
documentify - 模块化 HTML 捆绑器
jalla - 闪电般快速的 Web 编译器和服务器合二为一(也感谢大量代码片段!)