一鍵快速生成項目腳手架（可選擇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 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代碼複製代碼

編譯

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

<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

項目地址

github.com/hawx1993/hb… ，歡迎star和提issue