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