Toolkit modular untuk membangun situs web statis
Stakit adalah kerangka kerja yang membantu Anda menyusun pipeline build yang kuat untuk situs web statis tanpa bersusah payah. Ini minimal dan modular, menggunakan aliran dan toolkit Stakit memiliki banyak plugin dan transformasi yang dapat Anda gunakan.
Stakit masih dalam tahap awal pengembangan, tetapi Anda dapat mengambilnya dan menggunakannya untuk melihat apakah Anda harus peduli atau tidak.
framework agnostic : bekerja dengan framework apa pun yang dapat menghasilkan string
modular : Anda tidak pernah memiliki apa yang tidak Anda perlukan, tetapi Anda dapat npm install
api kecil : hanya memiliki 7 metode inti, hanya 3 yang harus Anda gunakan
tanpa batasan : Anda tidak pernah dibatasi oleh fitur dan templat generator situs statis
cepat, hemat memori : banyak menggunakan aliran
npm i stakit
var stakit = memerlukan('stakit')var { render, hidrat } = memerlukan('stakit-choo')var app = memerlukan('.')var kit = stakit()
.routes(fungsi (status) {kembali [ '/' ]
})
.render(render(aplikasi))
.transform(hidrat)kit.output(stakit.writeFiles('./public'))Umumnya, Anda melakukan 2 hal saat membuat situs statis:
isi aplikasi Anda dengan beberapa konten
salin file statis
Ada banyak alat modular (dan bagus) untuk menggabungkan Javascript atau mengubah CSS, Stakit adalah sesuatu yang serupa, tetapi untuk situs lengkapnya, dan terutama berfokus pada file HTML.
Anda harus menangani bundling aplikasi Anda dan menyertakan bundle tersebut jika itu yang Anda perlukan. Mengikuti filosofi Choo, ukurannya kecil, mudah dimengerti, dan mudah digunakan. Ini dirancang untuk bekerja terutama dengan Choo, tetapi juga harus bekerja dengan kerangka isomorfik lainnya.
Stakit dipanggil secara terprogram, bukan dari baris perintah, oleh karena itu Anda memerlukan file Javascript (seperti build.js ), jika Anda memerlukannya. Setelah itu Anda dapat menginisialisasi kit dengan stakit() dan kemudian merangkai beberapa metode.
Dua metode harus muncul dalam pipeline:
routes(fn)
render(fn)
Semua metode lainnya bersifat opsional dan dipanggil dalam urutan berikut:
semua middleware diterapkan oleh kit.use()
fungsi routesReducer yang diterapkan
untuk setiap rute:
satu panggilan ke renderer yang diterapkan
semua panggilan transform
Akhiri alur dengan kit.output() .
Bagian ini memberikan dokumentasi tentang cara kerja setiap fungsi di Stakit. Ini dimaksudkan sebagai referensi teknis.
kit = stakit() Inisialisasi instance kit baru.
kit.html(template, selector)Mengatur templat dan pemilih HTML awal.
kit.use(fn(context)) Mendorong middleware/plugin ke daftar middleware, fungsi tujuan umum dijalankan sebelum pembuatan rute. Anda dapat mengubah konteks sesuka Anda, mulai dari mengubah state hingga menginstal transform s.
kit.menggunakan(fungsi (ctx) {
ctx._transforms.push(transformasi)})Lihat Middlewares untuk informasi lebih lanjut.
kit.routes(routeReducer(state)) routeReducer adalah fungsi yang mendapatkan context.state sebagai parameter dan mengembalikan Array string/rute. Ini adalah rute yang akan dipanggil Stakit render .
kit.routes(fungsi (status) {
kembalikan Objek.kunci(status.konten)
// atau secara statis
kembali [ '/', '/tentang', '/blog' ]})kit.render(renderer(route, state)) Menyetel penyaji build. Di sinilah keajaiban terjadi. renderer akan dipanggil untuk setiap rute yang dikembalikan oleh routes .
Itu harus mengembalikan objek dengan nilai berikut:
{
html: string, // hasil render
state: object // keadaan setelah render (opsional)}Transformasi akan menerima status terbaru yang dikembalikan di sini.
kit.transform(transformFn, opts) Mendorong transformasi ke daftar transformasi. Stakit menggunakan documentify dan stream untuk membangun HTML.
Mereka dipanggil setelah konten yang dirender diganti dalam HTML.
Lihat Transformasi untuk informasi lebih lanjut.
kit.output(writerObject) Memulai alur pembangunan dan mengakhirinya dengan meneruskan semua rute ke writerObject.write({ destination, stream }) . Mengembalikan Promise yang menunggu hingga semua file (rute dan statis) telah ditulis sepenuhnya.
Secara default, ia menggunakan Writer yang menampilkan situs ke direktori ./public .
Lihat Penulis untuk informasi lebih lanjut.
Middleware bawaan:
stakit.state(extendState) Utilitas untuk membantu Anda menambahkan nilai ke context.state
kit.use(stakit.state({ pesan: 'selamat pagi!' }))stakit.copy(files)Middleware untuk menyalin file ke direktori keluaran.
// Salin file ke locationkit.use(stakit.copy([ 'robots.txt' ])) yang sama// Salin file ke lokasi berbeda dalam output pathkit.use(stakit.copy({
'robots.txt': 'robots.txt',
'peta situs.xml': 'peta situs/peta situs.xml'})) Documentify sangat kuat dan dapat dengan mudah dimodulasi. Format umum transformasi Stakit adalah:
// dibungkus dalam suatu fungsifungsi lang (konteks) {
// mengembalikan transformasi dokumentasi
return function (lang) {// mengembalikan aliran transformasireturn hstream({ html: { lang: lang } })
}} Catatan: hstream adalah teman yang sangat baik!
Transformasi documentify dibungkus dalam sebuah fungsi, sehingga kita bisa mendapatkan context saat kita membutuhkannya, tanpa mengacaukan API documentify . Jika Anda ingin melewati ini, Anda cukup mengembalikan transformasi documentify dari suatu fungsi.
Lihat transformasi apa yang disertakan dengan Stakit di transforms/readme.md .
Penulis mengeluarkan file statis yang dihasilkan dan diubah. Hal ini dapat bervariasi mulai dari keluaran ke sistem file, hingga memasukkannya ke dalam arsip Dat.
Seorang penulis harus menerapkan metode: write . Untuk setiap file, termasuk halaman yang dihasilkan + file yang ditambahkan ke context._files , writer.write akan dipanggil dengan objek file. Ini harus mengembalikan Promise yang kembali setelah pipa dibilas (file telah ditulis sepenuhnya).
Objek file terlihat seperti ini:
{
source: null | string,
destination: string,
stream: Stream
}Disarankan untuk membersihkan direktori keluaran sebelum setiap build.
Lihat metode stakit.writeFiles bawaan sebagai contoh.
Itu semua tentang penulis.
choo - kerangka frontend 4kb yang kokoh
mendokumentasikan - Bundel HTML modular
jalla - Kompiler dan server web secepat kilat dalam satu kesatuan (terima kasih juga atas banyak cuplikan kodenya!)