H5&H5游戏基础仓库

使用的是 preact+htm 方式构建应用。

这里未使用jsx而使用htm （周边 VScode高亮插件 jsx转htm to-htm ）

同时，未使用ES6的import而使用AMD规范的 im.js 模块加载器 (~~~require.js已停止维护故废弃~~~ ) 目的在于，希望浏览器直接执行“源码”从而保持灵活轻巧。 浏览器直接执行代码，带来的调试方便，可以基于替换单个模块文件进行线上调试。

由于imjs加载器文件只有2KB，构建时会直接将imjs合并到了main-build.js。

项目基础的依赖（ imjs + preact + htm + preact-router + history + linkstate + remjs ）打包后min文件只有26KB左右（开启gzip仅为10KB）， 如果再加上axios也只有40KB左右（开启gzip仅为15KB）。所以十分轻巧，让移动端飞一般的加载速度！

编译构建的目的是自动更新版本号、压缩文件优化加载速度、对老旧浏览器的支持。

编译构建后，

• css/index.less 编译为 css/index.css
• js/lib文件夹的js文件合并为了js/lib/index.js
• 以main.js入口的模块合并压缩为main-build.out.js
• package.json中的版本号会更新
• index.php访问时根据版本号判断是否是正式环境，正式环境使用 css/index.css、js/lib/index.js、main-build.out.js

目录说明

install

npm i 注：放入php项目目录，浏览器访问运行源码进行开发，所以不构建编译可以不用安装，最终上线时进行一次构建即可。

build

构建开发环境 npm run build:dev

构建正式环境 npm run build:prod

合并js/lib文件夹 npm run build:lib (可以在 build/mergejs.js 内配置黑名单)

构建index.html静态文件 npm run build:index (需要配置php到环境变量)

zip打包 npm run pack （配置见build/packlist.txt）

注：如果构建失败建议使用nodejs的最新版本，对制定兼容浏览器版本，配置可以修改.babelrc

生产环境

环境根据版本号判断，例如，版本号 1.0.1为正式版使用正式环境 版本号为1.0.2dev为开发版(只要包含英文字符)就是开发版，同时使用环境配置为开发环境。

环境配置在 package.json env字段里设置，配置后，在浏览器中可以用window.env 取到对应配置信息。

调试模式

url后接?debug 切换到debug模式。如：http://localhost/?debug 此模式和开发模式类似，需要在package.json里面配置独立的env。

另外，参数r可以跳转页面，如：http://localhost/?r=demo可以跳到对应demo页面

package.json 里通过设置 enableDebug 可以配置是否启用调试模式

ES6特性支持

• http://es6.ruanyifeng.com
• Class
• Generator
• async/await
• ...
• import 模块

package.json 拓展配置

title 网站标题

share 分享相关信息，标题 内容 图片

designWidth 配置Rem的设计宽度designWidth 参考rem.js

env 环境变量

enableDebug 开启线上调试功能

技术栈

preact htm imjs less babel