webpack static site generator

Webpack مولد الموقع الثابت

مكون إضافي لـ Webpack لإنشاء موقع ثابت يعتمد على مجموعة من المسارات. تمت كتابة هذا للعمل مع مشروع تم إنشاؤه بواسطة Vue.js CLI، حيث لم يحالفني الحظ مع مولدات المواقع الثابتة الأخرى.

تثبيت

npm i --save-dev webpack-static-site-generator

أو

yarn add webpack-static-site-generator -D

الاستخدام

في webpack.conf.js :

 var StaticSiteGenerator = require ( 'webpack-static-site-generator' )

// Add the plugin to the plugin array
plugins: [
    new StaticSiteGenerator (
        // path to the output dir
        path . join ( __dirname , './dist' ) , 
        // array of routes to generate
        [ '/' . '/about' , '/blog' , '/blog/blog-post-1' ] ,
        // [OPTIONAL] element (in querySelector style) to wait for before rendering.
        // defaults to 'body'
        '.main-container'
    )
]

سيبدو الإخراج شيئًا مثل هذا:

 .
├── index.html
├── about
│   └── index.html
└── blog
    ├── blog-post-1
    │   └── index.html
    └── index.html

كيف يعمل

بعد أن يقوم Webpack بإنشاء الأصول لموقعك، يقوم هذا البرنامج المساعد بما يلي:

1. يخدم دليل الإخراج المحدد باستخدام Express
2. يقوم بتحميل كل طريق متوفر باستخدام Nightmare
3. يحفظ HTML لكل مسار إلى نظام الملفات

باستخدام على ترافيس CI

يستخدم Nightmare Electron لعرض الصفحات، وقد يتطلب تكوينًا إضافيًا على أجهزة Linux، بما في ذلك Travis CI. نظرًا لأن Electron ليس بدون رأس تمامًا، فنحن بحاجة إلى إعداد xvfb (X Virtual Frame Buffer) لمنح Electron عرضًا افتراضيًا يمكنه استخدامه للعرض. لقد تم بالفعل إعداد هذا البرنامج الإضافي لنا بواسطة xvfb عند الحاجة، نحتاج فقط إلى تثبيته.

أضف ما يلي إلى .travis.yml الخاص بك:

 sudo : required
addons :
  apt :
    packages :
      - xvfb
      - libxss1

قد تكون هناك حاجة أيضًا إلى تكوين إضافي لأنظمة CI الأخرى.

مشاكل؟

لم يتم اختبار هذا البرنامج المساعد على نطاق واسع. أستخدمه في مشروع Vue.js CLI واحد، وهو يعمل بشكل جيد. إذا كان لديك أي مشكلة في ذلك، قم بإنشاء مشكلة وسأرى ما يمكنني فعله.