hsx

HSX

帶有JSX，SASS和WebPack的靜態HTML站點（無反應）。

關於

• 用於構建靜態網站（不是應用程序）
• 將JSX彙編為HTML，無反應（JSX成為HTML模板語言）
• 支持簡單的呈現組件（類似於React的功能性無狀態組件）

為什麼？

• JSX是一種非常強大的HTML模板語言
• “ JS中的html”感覺很棒
• webpack非常強大
• 使用模塊捆綁器（ webpack ）建造靜態站點（WebPack）提供了與gulp / grunt不同優勢

盒子裡有什麼

hsx是用於腳手架新項目的CLI（請參閱模板）。內部內容的簡要說明如下：

• 贓物webpack2設置
  • JSX到靜態HTML通過string-dom
  • SASS和postcss （帶有autoprefixer和rucksack ）
  • 圖像壓縮通過imagemin
  • 由webpack-dev-server驅動的本地服務器
• 有線Main組件
• 最小的Sass樣板（硬重置，混合素，變量等）
• 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