一、概述
快速创建针对移动端的初始模板,方便快速开发,适用于移动端日常专题/活动页、常规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协议。