使用hbuild快速構建現代化web應用

About Hbuild

Hbuildis a modern project starter kit ，which allows you to build your own project with hbuild-cli rapidly

Hbuild使用 命令行工具，全局註冊後可快速生成項目啟動套件。你可以使用Hbuild生成一個h5項目，或者vue項目（默認搭配react-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 eslintLocal Templates

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

命令$ 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文件默認輸出到 目錄下，html文件名採用其在 下的父級目錄的文件名

3.編譯後的靜態資源文件（圖片，字體，js文件等）存放到 目錄下，編譯支持文件hash，解決緩存問題

4.支持代碼熱替換，熱替換失敗會自動刷新整個頁面

HTML

1.h5項目的頁面默認採用ejs模板引擎和zepto，可直接使用。

2.當你執行發布線上的命令時，html和js代碼會被壓縮

3.當你在pages下新建一個目錄時，html文件需要手動配置一下靜態資源的引用

CSS

1.支持css預處理器LESS和SASS，後續逐步支持其他css處理器

2.默認採用 的方式，可在 文件中配置是否單獨提取css，提取出的css文件名稱默認為：

3.支持 屏幕適配方案，採用 的方式，默認在 文件中

4.支持postcss和

其他

mock：mock 數據只需要介面URI路徑和mock目錄保持一致即可

介面：介面如需根據環境來替換，需在 文件和 文件進行配置

支持多入口文件，可在pages下新建目錄，文件名需以index開頭

入口文件：腳手架默認會讀取pages目錄下的index開頭的js文件為入口文件，名稱是寫死的

修改默認文件夾的名稱，需要在 文件就對應文件變數做修改

提取CSS以及sourceMap功能只在非開發模式下進行。

項目地址：https://github.com/hawx1993/h...

License

MIT ?hawx1993

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！