一键快速生成项目脚手架（可选择h5/vue/react）

About Hbuild

Hbuild is a modern project starter kit
which allows you to build your own project by cli rapidly

Hbuild使用hbuild-cli命令行工具，可快速生成项目启动套件，学习成本低，该套件包含如下特点：

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 [email protected]: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代码复制代码

编译

0.入口文件为pages目录下的index.js文件，webpack通过读取该文件进行编译打包

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目录下：

一键快速生成项目脚手架（可选择h5/vue/react）

Features

Get Started

Local Templates

命令

编译

HTML和模板引擎

你可能感兴趣的:(一键快速生成项目脚手架（可选择h5/vue/react）)