运用hbuild疾速构建现代化web运用

Hbuild运用hbuild-cli敕令行东西，全局注册后可疾速天生项目启动套件。你能够运用Hbuild天生一个h5项目，或许vue项目（默许搭配react-router，可自由挑选vuex），或许react项目。该套件包括以下特性：

Features

• Vue2 / Vue-Router / Vuex (optional)
• Hot reloading for single-file components
• Webpack 2
• babel (default)
• LESS/SASS/Stylus (optional)
• ejs/mustache/art-template (optional)
• React / React-Router (optional)
• zepto
• autoprefixer (vue support)
• mock server
• eslint
• Support for building multi-page applications
• offline mode support
• file hash

个中zepto是默许全局引入的，可直接运用。h5项目能够挑选ejs，mustache或art-template模板引擎。 默许支撑Babel转码。支撑HMR。支撑文件指纹。

vue项目默许支撑vue-router，react项目默许支撑react-router

Get Started

You’d better have node >=6 and npm >=3 and gulp >=3.9 installed:

$ npm install -g hbuild-cli
$ h init new-project
 
# edit files and start developing
$ npm run dev
# bundle all scripts and styles for production use
$ npm run prod
 
# lint your js code
$ npm run eslint

Local Templates

when you clone this project,you can use a template on your local file system:

$ git clone git@github.com:hawx1993/hbuild.git
$ h init ./hbuild new-project

敕令

$ npm run dev;//当地开辟形式，衔接mock数据
$ npm run dev-daily;//当地开辟形式，衔接daily一样平常环境数据
$ npm run dev-pre;//当地开辟形式，衔接预发环境数据
$ npm run daily;//线上一样平常构建形式，衔接daily一样平常环境数据
$ npm run pre;//线上预发构建形式，衔接预发环境数据
$ npm run prod;//线上构建形式，衔接线上环境数据
$ npm run eslint;//js代码检察，默许搜检除lib文件夹下的js代码

编译

1.js代码默许采纳Babel编译，gulp + webpack打包构建。

2.编译后的html文件默许输出到build/pages目次下，html文件名采纳其在src/pages下的父级目次的文件名

3.编译后的静态资本文件（图片，字体，js文件等）寄存到build/static目次下，编译支撑文件hash，处理缓存题目

4.支撑代码热替代，热替代失利会自动革新全部页面

5.开辟形式不对代码举行紧缩，sourceMap 只针对非开辟形式有用(not dev)

6.支撑图片紧缩

HTML和模板引擎

1.h5项目支撑 ejs ，mustache和art-template模板引擎，默许支撑zepto

2.非当地开辟环境，html，js和css代码会被紧缩

3.当你在pages下新建一个目次时，html文件须要手动设置一下静态资本的援用，例如在index目次下：

<script src="$$_CDNPATH_$$/index/index.js"></script>

CSS和预处理器

1.支撑css预处理器LESS、SASS和stylus (optional);

2.默许采纳css-in-js的体式格局，可在hbuild.config.js文件中设置是不是零丁提取css，提掏出的css文件称号默许为：[name].css，name为src下less/scss/stylus文件名

3.开启提取css文件，须要在HTML中引入，引入体式格局同js

4.支撑 屏幕适配计划，采纳media-query+rem的体式格局，默许在common.less文件中

5.支撑postcss和autoprefixer

代码搜检

1.npm run eslint 支撑vue单文件组件，支撑es6语法搜检

其他

• mock：mock 数据只须要接口URI途径和mock目次坚持一致即可
• 接口：接口如需依据环境来替代，需在hbuild.config.js文件和common/js/config文件举行设置
• 支撑多进口文件，可在pages下新建目次，文件名需以index开首
• 字符串替代：$$_CDNPATH_$$会被编译替代为build/static/hash目次，$$_STATICPATH_$$会被替代为build/static/hash/assets
• 进口文件：脚手架默许会读取pages目次下的index开首的js文件为进口文件，称号是写死的
• 修正默许文件夹的称号，须要在hbuild.config.js文件就对应文件变量做修正

目次构造

.
├── README.md
├── build                       # 构建东西目次
│    └── gulpfile.js            # gulp文件
│    └── postcss.config.js      # postcss设置文件
│    └── util.js                # gulp脚手架东西要领
│    └── hbuild.config.js       # 脚手架设置文件
├── mock                        # mock数据目次，坚持和接口一样的途径即可
│   └── h5
├── package.json    
├── src                         # 源文件 
│   ├── assets                  # 静态资本目次，寄存图片或字体
│   │   └── logo.ico
│   ├── common                  # 共用代码目次，css目次寄存公用css部份，js同理
│   │   ├── css
│   │   │   ├── common.less
│   │   │   └── common.scss
│   │   └── js
│   │       ├── api.js          # api文件
│   │       ├── config.js       # 设置文件
│   │       └── util.js         # 东西函数文件，可将公用要领寄存于此
│   ├── components              # 组件目次
│   │   ├── counter             # 计数器vue组件
│   │   │   └── index.vue
│   │   ├── index               # vue组件的进口文件
│   │   │   └── index.vue
│   │   ├── meta                # h5 meta头部信息模块
│   │   │   └── index.html
│   │   ├── router              # vue路由模块
│   │   │   └── router.js
│   │   └── store               # vuex store模块
│   │       └── store.js
│   ├── lib                     # 第三方库 
│   └── pages                   # 页面    
│       └── index               # 首页目次，可在pages目次下新建多个目次构造，作为多进口文件
│           ├── index.html
│           ├── index.js        # index.js/index.jsx文件为webpack的进口文件
│           ├── index.jsx
│           ├── index.less      # 款式文件在js文件中引入，可设置是不是提掏出css文件     
│           ├── index.scss
│           └── module          # 页面模板模块，可在index.js/jsx文件引入该模块文件
│               ├── main.jsx
│               └── main.tpl.html
└── yarn.lock

ChangeLog

changelog

License

MIT © hawx1993

项目地点

https://github.com/hawx1993/h… 迎接star or issue