使用 Hbuild 快速构建生成现代化前端项目

About Hbuild

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

在前端项目日渐复杂的今天，搭建脚手架，配置项目环境等都有着必定的成本，有没有更简单且一劳永逸的方法呢？

Hbuild是一套结合cli命令行以及项目模板的工具，经过命令行的方式实现快速构建，使得整套开发的成本大为降低，同时它还提供了三套项目模板（h5,vue全家桶，react），可在本地环境自由定制。（因为时间缘由，react全家桶，更多的模板引擎，预处理器等后续支持）

Hbuild使用hbuild-cli命令行工具，全局注册后可快速生成项目启动套件。你能够使用Hbuild生成一个h5项目，或者vue项目（默认搭配vue-router，可自由选择vuex），或者react项目。该套件包含以下特色：

Features

• Vue2 / Vue-Router / Vuex
• Hot reloading for single-file components
• Webpack 2
• ES6
• LESS
• SASS
• React
• zepto
• autoprefixer
• mock server
• eslint
• Support for building multi-page applications
• offline mode support
• file hash

其中zepto是默认全局引入的，可直接使用。h5项目默认引入ejs模板引擎。默认支持Babel转码。支持HMR。支持文件hash，以解决缓存问题。

Get Started

You'd better have node >=4 and npm >=3 and gulp >=3.9 installed:

$ npm install -g hbuild-cli
$ hbuild init new-project 
$ //or use
$ h init new-project //support short command
$ cd new-project
$ npm install || yarn

# 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
$ hbuild init ./hbuild new-project
//or
$ 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编译，webpack打包构建。
2.编译后的html文件默认输出到build/pages目录下，html文件名采用其在src/pages下的父级目录的文件名
3.编译后的静态资源文件（图片，字体，js文件等）存放到build/static目录下，编译支持文件hash，解决缓存问题
4.支持代码热替换，热替换失败会自动刷新整个页面

HTML

1.h5项目的页面默认采用ejs模板引擎和zepto，可直接使用。
2.当你执行发布线上的命令时，html和js代码会被压缩
3.当你在pages下新建一个目录时，html文件须要手动配置一下静态资源的引用

CSS

1.支持css预处理器LESS和SASS，后续逐步支持其余css处理器

2.默认采用css-in-js的方式，可在hbuild.config.js文件中配置是否单独提取css，提取出的css文件名称默认为：[name].extract.css

3.支持 屏幕适配方案，采用media-query+rem的方式，默认在common.less文件中

4.支持postcss和autoprefixer

其余

• mock：mock 数据只须要接口URI路径和mock目录保持一致便可
• 接口：接口如需根据环境来替换，需在hbuild.config.js文件和common/js/config文件进行配置

• 支持多入口文件，可在pages下新建目录，文件名需以index开头

• 字符串替换：$$_CDNPATH_$$会被编译替换为build/static/hash串目录

• 入口文件：脚手架默认会读取pages目录下的index开头的js文件为入口文件，名称是写死的

• 修改默认文件夹的名称，须要在hbuild.config.js文件就对应文件变量作修改

• 提取CSS以及sourceMap功能只在非开发模式下进行。

目录结构

.
├── README.md
├── gulpfile.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
├── webpack.config.js
└── yarn.lock复制代码

License

MIT © hawx1993

项目地址: github.com/hawx1993/hb…