使用Hbuild快速構建生成現代化前端項目

01-23

About Hbuild

在前端項目日漸複雜的今天，搭建腳手架，配置項目環境等都有著一定的成本，有沒有更簡單且一勞永逸的方法呢？Hbuild是一套結合cli命令行以及項目模板的工具，通過命令行的方式實現快速構建，使得整套開發的成本大為下降，同時它還提供了三套項目模板（h5,vue全家桶，react），可在本地環境自由定製。（由於時間原因，react全家桶，更多的模板引擎，預處理器等後續支持）

項目地址：hawx1993/hbuild

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

clone該項目，在本地生成模板，可以自定義專屬你的項目模板，並使用命令行快速生成基於該模板的項目：

$ 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

結尾

項目還有很多不足，歡迎使用並提出誠懇建議或意見，有時候也會挖坑不填，anyway，歡迎使用

hbuild-cli基於vue-cli修改，安裝與使用hbuild-cli更快速簡潔，模板的使用與vue-cli一致。

License

MIT ? hawx1993