https://github.com/hawx1993/hbuild
⚔repaid build web/vue/react project starter kit with cli
https://github.com/hawx1993/hbuild
hbuild react-scaffold scaffold starter-kit vue-scaffold
Last synced: about 1 year ago
JSON representation
⚔repaid build web/vue/react project starter kit with cli
- Host: GitHub
- URL: https://github.com/hawx1993/hbuild
- Owner: hawx1993
- License: mit
- Created: 2017-05-08T06:37:21.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-07-06T04:45:16.000Z (almost 8 years ago)
- Last Synced: 2025-03-27T20:44:57.529Z (about 1 year ago)
- Topics: hbuild, react-scaffold, scaffold, starter-kit, vue-scaffold
- Language: JavaScript
- Homepage: https://github.com/hawx1993/hbuild-cli
- Size: 196 KB
- Stars: 37
- Watchers: 5
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
###
About Hbuild
Hbuild is a modern project starter kit
which allows you to build your own project by cli rapidly
Hbuild使用[hbuild-cli](https://github.com/hawx1993/hbuild-cli)命令行工具，全局注册后可快速生成项目启动套件。你可以使用Hbuild生成一个h5项目，或者vue项目（默认搭配react-router，可自由选择vuex），或者react项目。该套件包含如下特点：
### 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](https://github.com/hawx1993/hbuild/blob/master/docs/filehash.md)
其中[zepto](https://github.com/hawx1993/hbuild/blob/master/docs/zepto.md)是默认全局引入的，可直接使用。h5项目可以选择`ejs，mustache`或`art-template`模板引擎。 默认支持Babel转码。支持HMR。支持[文件指纹](https://github.com/hawx1993/hbuild/blob/master/docs/filehash.md)。
vue项目默认支持`vue-router`，react项目默认支持`react-router`，暂不支持直接通过命令行选择`react-redux`，可直接自行通过npm包安装，可以正常编译
### Get Started
You'd better have node >=6 and npm >=3 and gulp >=3.9 installed:
```bash
$ npm install -g hbuild-cli
$ h init new-project
# edit files and start developing
$ npm start
# bundle all scripts and styles for production use
$ npm run build
```
### Local Templates
when you clone this project,you can use a template on your local file system:
```bash
$ git clone git@github.com:hawx1993/hbuild.git
$ h init ./hbuild new-project
```
### 命令
```
$ npm run start;//本地开发模式，连接mock数据
$ npm run dev-daily;//本地开发模式，连接daily日常环境数据
$ npm run dev-pre;//本地开发模式，连接预发环境数据
$ npm run daily;//线上日常构建模式，连接daily日常环境数据
$ npm run pre;//线上预发构建模式，连接预发环境数据
$ npm run build;//线上构建模式，连接线上环境数据
```
### 编译
1.js代码默认采用Babel编译，gulp + webpack打包构建。
2.编译后的html文件默认输出到`build/pages`目录下，html文件名采用其在`src/pages`下的父级目录的文件名
3.编译后的静态资源文件（图片，字体，js文件等）存放到`build/static`目录下，编译支持文件hash，解决缓存问题
4.支持代码热替换，热替换失败会自动刷新整个页面
5.开发模式不对代码进行压缩，sourceMap 只针对非开发模式有效(not dev)
6.支持图片压缩
7.支持生产环境拷贝mock数据至编译目录
### HTML和模板引擎
1.h5项目支持 ejs ，mustache和`art-template`模板引擎，默认支持`zepto`
2.非本地开发环境，html，js和css代码会被压缩
3.当你在pages下新建一个目录时，html文件需要手动配置一下静态资源的引用，例如在index目录下：
```javascript
```
### 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.当你执行`git commit`的时候，会自动触发执行eslint，支持vue和react单文件组件，支持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`文件就对应文件变量做修改
### 目录结构
```bash
.
├── README.md
├── build # 构建工具目录
│ └── gulpfile.babel.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
[view changelog](https://github.com/hawx1993/hbuild/blob/master/docs/ChangeLog.md)
### License
MIT © [hawx1993](https://github.com/hawx1993)