hsx

HSX

ไซต์ HTML แบบคงที่ด้วย JSX, SASS และ WebPack (ไม่มีการตอบสนอง)

เกี่ยวกับ

• หมายถึงการสร้างเว็บไซต์คงที่ (ไม่ใช่แอพ)
• รวบรวม JSX เป็น HTML โดยไม่มีการตอบสนอง (JSX กลายเป็นภาษาเทมเพลต HTML)
• รองรับส่วนประกอบที่ง่ายและนำเสนอ (คล้ายกับส่วนประกอบไร้สัญชาติของ React)

ทำไม

• JSX เป็นภาษาเทมเพลต HTML ที่ทรงพลังอย่างไม่น่าเชื่อ
• "html in js" รู้สึกยอดเยี่ยม
• webpack มีประสิทธิภาพอย่างบ้าคลั่ง
• การสร้างไซต์คงที่ด้วยโมดูล Bundler ( webpack ) มีข้อได้เปรียบที่แตกต่างกันมากกว่า gulp / grunt

มีอะไรอยู่ในกล่อง

hsx เป็น CLI สำหรับการนั่งร้านโครงการใหม่ (ดูเทมเพลต) คำอธิบายสั้น ๆ เกี่ยวกับสิ่งที่อยู่ข้างในดังนี้:

• การตั้งค่า swag webpack2
  • JSX ถึง HTML แบบคงที่ผ่าน string-dom
  • sass และ postcss (พร้อม autoprefixer และ rucksack )
  • การบีบอัดภาพผ่าน imagemin
  • เซิร์ฟเวอร์ท้องถิ่นขับเคลื่อนโดย webpack-dev-server
• ส่วนประกอบ Main มีสาย
• SASS Boilerplate ขั้นต่ำ (การรีเซ็ตฮาร์ด, mixins, ตัวแปร ฯลฯ )
• package.json พร้อม npm scripts ที่มีประโยชน์

ติดตั้ง

$ npm i hsx -g

ใช้

เพื่อสร้างโครงการใหม่:

 # using node and npm
# install hsx globally
$ npm install hsx -g

# use the hsx command from the CLI to scaffold a project
# template files are copied to the CWD, unless a path is specified
$ hsx [path]
$ npm i
$ npm run dev

จากนั้นในเบราว์เซอร์ของคุณ: http: // localhost: 3000/

องค์ประกอบแรก

สังเกตคิวไป babel เพื่อแปลง JSX เป็นการเรียกใช้ฟังก์ชัน sd แทนที่จะเป็น React.createElement

 import sd from 'string-dom'

/** @jsx sd */

// create a simple Div component
// children is the HTML wrapped by the element
const Div = ( { children , name } ) => (
  < div class = { name } >
    { children }
  </ div >
)

// render it to the DOM, with some inner content
document . body . innerHTML += (
  < Div name = "site" >
    < h1 > hsx </ h1 >
    < p > This is inside the Div component! </ p >
  </ Div >
) 

ใบอนุญาต

MIT © 2017 Michael Cavalea