后端工程师、后端爱好者
学习交流平台

html5-cli

一、概述

快速创建针对移动端的初始模板,方便快速开发,适用于移动端日常专题/活动页、常规wap应用的开发。

项目源码:https://gitee.com/bulls-cows/html5-cli

二、为何你需要html5-cli?

公司是不是有一堆移动端的专题活动页要开发?

是不是为了创建这些项目,都需要重复一些编写/复制webpack配置文件、编译命令等工作?

通过脚手架创建模板项目就是为了减少这些重复性工作。

html5-cli官方模板的主要特点有:

  • 🎄 使用常见的react,没有新的学习成本;
  • 📲 内置rem响应式支持(默认1rem = 100px,750px宽的设计稿对应7.5rem宽度);
  • 🌐 修改文件时自动刷新浏览器,方便查看效果;
  • 🙈 支持转发本地请求,避免跨域问题;
  • 💪 自动添加CSS浏览器厂商前缀;
  • 🔥 使用webpack4,支持js文件模块化开发;
  • 👫 支持使用ES6+新特性;
  • 🏇 自动压缩js、css,加快页面加载速度;
  • 🏏 编译产物目录名根据项目名动态生成(如”cjhd1903春节活动” => “cjhd1903”);
  • 🚑 eslint代码风格检测(开启自动修复功能);
  • 🛠 支持配置化渲染页面,方便深度定制;
  • 🚀 对于支持SFTP协议的服务器,支持命令行直接发布本地编译产物;
  • 🥤 集成支持按需加载的UI组件库:Ant design mobile(可选);
  • 🐢 支持将代码按路由进行分割,支持懒加载;

三、使用方法

3.1、第一次使用前的准备

第一次使用前,需要先全局安装html5-cli(后面再创建项目时不需要再执行这个命令了):

npm install -g html5-cli

然后,你就可以在你的终端中使用html5命令,或者使用别名h5了。

3.2、创建项目

# 将<project-name>替换成实际项目名(这里`h5`也可以换成`html5`,作用相同,看你喜欢用哪个命令)
h5 init <project-name>

3.3、安装项目依赖

进入项目目录后,安装依赖:

npm install

如果依赖安装较慢,可以使用淘宝镜像来安装依赖:

npm i --registry=https://registry.npm.taobao.org

说明:项目模板中提供了一个.npmrc文件,其中已经将registry设置为淘宝镜像,并且设置了sass_binnary_site(默认模板中没用到sass,预留给打算装sass来写项目的同学)。

3.4、本地开发

进入到<project-name>模板项目根目录,通过下面的命令进行本地开发(渲染模版文件时,可以直接读取到src/site.data.config.js文件中的配置内容):

npm run start

3.5、构建正式产物

开发完毕后,可以通过下面的命令构建正式编译产物:

npm run build

3.6、部署上线

如果目标服务器支持通过SSH协议进行文件部署,则可通过下面的命令进行部署(需要先依据build/deploy-example.js的内容写一个build/deploy.js文件):

npm run deploy

注:如果不想每次都敲npm run build和 npm run deploy 命令,可以直接执行 npm run buildAndDeploy 命令,  npm run buildAndDeploy 命令会先编译产物然后直接发布,跟分开执行 npm run build 和 npm run deploy 效果是等价的。

四、协议

本项目采用MIT协议。