hsx

HSX

مواقع HTML ثابتة مع JSX و SASS و WebPack (بدون رد فعل).

عن

• مخصص لبناء مواقع الويب الثابتة (وليس التطبيقات)
• تجميع JSX إلى HTML ، دون رد فعل (يصبح JSX لغة templating HTML)
• يدعم المكونات البسيطة والعروض (على غرار مكونات React الوظيفية عديمة الجنسية)

لماذا؟

• JSX هي لغة HTML قوية بشكل لا يصدق
• "HTML in JS" يشعر رائع
• webpack قوية بجنون
• يوفر بناء مواقع ثابتة مع Bundler Module Bundler ( webpack ) مزايا مميزة على gulp / grunt

ماذا يوجد في المربع

hsx هو CLI لسقالة مشروع جديد (انظر القالب). يتبع وصف موجز لما يوجد في الداخل:

• إعداد webpack2 Swag
  • 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 >
) 

رخصة

معهد ماساتشوستس للتكنولوجيا. © 2017 Michael Cavalea