用於建立靜態網站的模組化工具包
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 編譯器和伺服器合而為一(也感謝大量程式碼片段!)