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 ของแต่ละเส้นทางไปยังระบบไฟล์

ใช้กับ Travis CI

Nightmare ใช้ Electron เพื่อเรนเดอร์เพจ และอาจต้องมีการกำหนดค่าเพิ่มเติมบนเครื่อง Linux รวมถึง Travis CI เนื่องจากอิเล็กตรอนไม่ได้ไม่มีหัวเลย เราจึงต้องตั้งค่า xvfb (X Virtual Frame Buffer) เพื่อให้อิเล็กตรอนมีจอแสดงผลเสมือนที่สามารถใช้ในการเรนเดอร์ได้ ปลั๊กอินนี้ได้รับการตั้งค่าให้เรา xvfb แล้วเมื่อจำเป็น เราแค่ต้องติดตั้งมัน

เพิ่มสิ่งต่อไปนี้ใน .travis.yml ของคุณ :

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

อาจจำเป็นต้องมีการกำหนดค่าเพิ่มเติมสำหรับระบบ CI อื่นๆ

ปัญหา?

ปลั๊กอินนี้ยังไม่ได้รับการทดสอบอย่างกว้างขวาง ฉันใช้มันในโปรเจ็กต์ Vue.js CLI เดียว และมันใช้งานได้ค่อนข้างดี หากคุณมีปัญหาใดๆ ให้สร้างปัญหาขึ้นมา แล้วเราจะดูว่าฉันจะทำอย่างไร