stakit

Stakit

مجموعة أدوات معيارية لبناء مواقع ويب ثابتة

Stakit هو إطار عمل يساعدك على إنشاء خطوط بناء قوية لمواقع الويب الثابتة دون بذل أي جهد. إنه صغير الحجم ومعياري، ويستخدم التدفقات، وتحتوي مجموعة أدوات Stakit على مجموعة من المكونات الإضافية والتحويلات التي يمكنك استخدامها.

لا يزال Stakit في مرحلة مبكرة من التطوير، ولكن يمكنك أخذه واستخدامه لمعرفة ما إذا كان يجب أن تهتم به أم لا.

سمات

• الإطار الحيادي : يعمل مع أي إطار يمكنه إخراج سلسلة

• modular : لن يكون لديك أبدًا ما لا تحتاجه، ولكن يمكنك npm install

• واجهة برمجة التطبيقات الصغيرة : تحتوي على 7 طرق أساسية فقط، ويجب عليك استخدام 3 منها فقط

• لا توجد قيود : لن تكون مقيدًا أبدًا بالميزات والقوالب الخاصة بمولد الموقع الثابت

• سريع وفعال في الذاكرة : يستخدم التدفقات بكثافة

تثبيت

npm i stakit

مثال

 var stakit = require('stakit')var { render, hydrat } = require('stakit-choo')var app = require('.')var kit = stakit()
  المسارات (الوظيفة (الحالة) {العودة ['/' ]
  })
  تقديم (تقديم (التطبيق))
  .transform(هيدرات)kit.output(stakit.writeFiles('./public'))

لماذا؟

بشكل عام، عليك القيام بأمرين عند إنشاء موقع ثابت:

• املأ تطبيقك ببعض المحتوى

• نسخ الملفات الثابتة

هناك العديد من الأدوات المعيارية (والجميلة) لتجميع Javascript أو تحويل CSS، Stakit شيء مشابه، ولكن بالنسبة للموقع الكامل، ويركز بشكل خاص على ملفات HTML.

سيتعين عليك التعامل مع تجميع تطبيقك بما في ذلك الحزمة إذا كان هذا هو ما تحتاجه. باتباع فلسفة تشو، فهو صغير الحجم ومفهوم وسهل الاستخدام. لقد تم تصميمه للعمل بشكل أساسي مع Choo، لكن يجب أن يعمل مع أطر عمل متماثلة أخرى أيضًا.

الاستخدام

يتم استدعاء Stakit برمجيًا، وليس من سطر الأوامر، وبالتالي ستحتاج إلى ملف Javascript (مثل build.js )، حيث تحتاج إليه. بعد ذلك يمكنك تهيئة المجموعة باستخدام stakit() ثم ربط طريقتين.

يجب أن تظهر طريقتان في المسار:

• routes(fn)

• render(fn)

جميع الطرق الأخرى اختيارية ويتم استدعاؤها بالترتيب التالي:

1. جميع البرامج الوسيطة المطبقة بواسطة kit.use()

2. وظيفة routesReducer المطبقة

3. لكل طريق:

1. مكالمة واحدة إلى renderer المطبق

2. جميع transform المكالمات

قم بإنهاء المسار باستخدام kit.output() .

واجهة برمجة التطبيقات

يوفر هذا القسم وثائق حول كيفية عمل كل وظيفة في Stakit. الغرض منه هو أن يكون مرجعًا تقنيًا.

kit = stakit()

تهيئة مثيل kit جديدة.

kit.html(template, selector)

يضبط قالب HTML للبدء والمحدد.

kit.use(fn(context))

يدفع البرامج الوسيطة/المكونات الإضافية إلى قائمة البرامج الوسيطة، ويتم تشغيل وظائف الأغراض العامة قبل إنشاء المسار. يمكنك تعديل السياق بالطريقة التي تريدها، بدءًا من تغيير state وحتى تثبيت transform .

 كيت.استخدام (وظيفة (ctx) {
  ctx._transforms.push(تحويل)})

راجع البرامج الوسيطة لمزيد من المعلومات.

kit.routes(routeReducer(state))

إن routeReducer هي دالة تحصل على context.state كمعلمة وتقوم بإرجاع Array من السلاسل/المسارات. هذه هي المسارات التي سيستدعي Stakit عليها render .

 عدة.طرق (وظيفة (حالة) {
  إرجاع Object.keys(state.content)
  // أو بشكل ثابت
  إرجاع ['/'، '/حول'، '/مدونة' ]})

kit.render(renderer(route, state))

يضبط عارض البناء. هذا هو المكان الذي يحدث فيه السحر. سيتم استدعاء renderer لكل مسار يتم إرجاعه بواسطة routes .

يجب عليه إرجاع كائن بالقيم التالية:

 {
  html: سلسلة، // نتيجة العرض
  الحالة: الكائن // الحالة بعد العرض (اختياري)}

ستتلقى التحويلات الحالة المحدثة التي تم إرجاعها هنا.

kit.transform(transformFn, opts)

يدفع التحويل إلى قائمة التحويلات. يستخدم Stakit documentify والتدفقات لإنشاء HTML.

يتم استدعاؤها بعد استبدال المحتوى المعروض في HTML.

راجع التحويلات لمزيد من المعلومات.

kit.output(writerObject)

يبدأ خط أنابيب البناء وينهيه بتمرير كافة المسارات إلى writerObject.write({ destination, stream }) . يُرجع Promise ينتظر حتى تتم كتابة جميع الملفات (المسارات والثابتة) بالكامل.

بشكل افتراضي، يستخدم الكاتب الذي يقوم بإخراج الموقع إلى الدليل ./public .

راجع الكتاب لمزيد من المعلومات.

الوسيطة

البرامج الوسيطة المضمنة:

stakit.state(extendState)

أداة لمساعدتك في إضافة قيم إلى context.state

 kit.use(stakit.state({ الرسالة: "صباح الخير!" }))

stakit.copy(files)

وسيطة لنسخ الملفات إلى دليل الإخراج.

 // انسخ الملفات إلى نفس الموقعkit.use(stakit.copy([ 'robots.txt' ]))// انسخ الملفات إلى موقع مختلف داخل الإخراج pathkit.use(stakit.copy({
  'robots.txt': 'robots.txt'،
  'sitemap.xml': 'sitemaps/sitemap.xml'}))

يتحول

يعد Documentify قويًا جدًا ويمكن تعديله بسهولة. التنسيق العام لتحويل Stakit هو:

 // ملفوفة في دالة function lang (السياق) {
  // إرجاع تحويل التوثيق
  وظيفة الإرجاع (lang) {// إرجاع تيار تحويلreturn hstream({ html: { lang: lang } })
  }}

ملحوظة: hstream صديق جيد جدًا!

يتم تضمين تحويل documentify في دالة، حتى نتمكن من الحصول على context عندما نحتاج إليه، دون العبث بواجهة برمجة تطبيقات documentify . إذا كنت تريد تجاوز هذا، يمكنك ببساطة إرجاع تحويل documentify من دالة.

تعرف على التحويلات التي تأتي مع Stakit في transforms/readme.md .

الكتاب

يقوم الكتاب بإخراج الملفات الثابتة التي تم إنشاؤها وتحويلها. يمكن أن يختلف هذا من الإخراج إلى نظام الملفات إلى وضعها في أرشيف Dat.

يجب على الكاتب أن ينفذ طريقة: write . لكل ملف، بما في ذلك الصفحات التي تم إنشاؤها + الملفات المضافة إلى context._files ، سيتم استدعاء writer.write باستخدام كائن ملف. يجب أن يُرجع Promise يعود بعد مسح الأنبوب (تمت كتابة الملف بالكامل).

يبدو كائن الملف كما يلي:

{
  source: null | string,
  destination: string,
  stream: Stream
}

يوصى بتنظيف دليل الإخراج قبل كل إنشاء.

قم بإلقاء نظرة على طريقة stakit.writeFiles المضمنة كمثال.

هذا كل شيء عن الكتاب.

انظر أيضا

• choo - إطار أمامي قوي بحجم 4 كيلو بايت

• توثيق - مجمع HTML المعياري

• jalla - مترجم ويب سريع للغاية وخادم في جهاز واحد (شكرًا أيضًا على الكثير من مقتطفات التعليمات البرمجية!)