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