使用hbuild快速构建现代化web应用

使用hbuild快速构建现代化web应用

Hbuild使用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

其中zepto是默认全局引入的,可直接使用。h5项目可以选择ejs,mustacheart-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代码

编译

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

项目地址

https://github.com/hawx1993/h... 欢迎star or issue


30.2k 声望
4.7k 粉丝
0 条评论
推荐阅读
谈谈react hooks UI与业务逻辑分离的必要性与技术方案
当前端业务复杂度上升到一定程度的时候,如何提升前端代码质量便成了老生常谈的话题。似乎前端总逃不开改他人代码,重构,修复bug的宿命。那么,我们要如何从项目代码层面,改变这一局面呢?才能保证项目A之于开...

trigkit41阅读 705

Vue微信公众号开发踩坑记录
JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题

imwty132阅读 67.7k评论 81

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.5k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.1k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.6k评论 6

30.2k 声望
4.7k 粉丝
宣传栏