H5实践（2）- H5辅助开发环境搭建

H5游戏开发上的先天不足

做H5游戏开发时，通常都会遇到些问题。

这里总结下本人开发过程中遇到的：

• 开tomcat、nginx、apache之类的web服务器，提供网址
• 需要支持webpack、browserify之类的打包工具，使之能require模块编程。可以使用node.js库。
• 使用gulp、webpack-dev-server之类的热更调试服务器
• websocket到tcp服务器的代理。方便网页直接访问tcp服务器
• 解决浏览器跨域问题

下面，对于每小点，依次详细解释之。

支持Node.js库的H5编程

很久以前的JS编程是不支持模块化编程的。

即类似 require、module之类的概念是没有的。

现在主流的，都会使用npm、nodejs。

为了在网页上可以使用require，则必须使用 webpack、browserify之类的打包工具。

使js文件代码，转化为页面能识别的js语法。

本系列使用的webpack打包工具。

所有辅助工具都是围绕webpack，来做集成的。

热更新（自动打包、自动刷新页面）

js的热更新网上搜下一大箩。

然而绝大多数都是不能简单使用的。因为需要和webpack做配合。

总结下，需要做下面的几件事：

• 能监视js、html、css等文件变化
• 能触发变化事件，并重新使用webpack打包
• 能通知页面自动刷新

因此，最终，通过集成下面的内容，实现了上述功能：

• express
• gulp
• gulp-webpack
• gup-connect

主要代码示例：

webdevjs.start = function (configfile) {
    if (!configfile) {
        configfile = './webpack.config.js';
    }
    configfile = process.cwd() + '/' + configfile;
    var config = require(configfile);
    gulp.task('html', function () {
        gulp.src(config.devServer.watch_html)
            .pipe(gulpConnect.reload());
    });
    gulp.task('webpack', function () {
        gulpWebpack(require(configfile))
            .pipe(gulp.dest('.'))
            .pipe(gulpConnect.reload());
    });
    gulp.task('default', function () {
        webdevjs.runweb(config);
        gulpConnect.server({
            livereload: true,
            port: config.devServer.port,
            middleware: function (connect, opt) {
                return [
                    httpProxyMiddleware('/', {
                        target: 'http://localhost:' + String(config.devServer.port + 1),
                        changeOrigin: true
                    })
                ];
            }
        });
        gulp.watch(config.devServer.watch_html, ['html']);
        gulp.watch(config.devServer.watch_js, ['webpack']);
    });
    gulp.start();
};

TCP服务代理

H5网页现在做长连接的有2种方式：

• 通过flash对象来做tcp长连接
• 使用websocket来做基于websocket协议的长连接

由于flash as3编程，在手机端不是很流行。因此现在主流使用websocket。

因此，H5应用网络模块通常2种情况：

1. 页面WebSocket => 支持websocket协议的游戏服务器
2. 页面WebSocket => TCP代理服务器 => TCP协议游戏服务器

正式外网服务必定使用1。
其他用途，可1、可2。

浏览器跨域问题

正式情况不应该出现浏览器跨域问题。

即，游戏服务器必须提供可跨域的方式。如 支持 GET 方式请求，则浏览器有方法绕过跨域问题。

否则，则只能在浏览器端通过增加些启动参数，关闭浏览器某些安全功能。来绕过跨域问题。

通用的开发用web服务器

为了便利开发，可以把上述这些问题，集成到一个通用的辅助web服务器中。

可以参考本人github上的项目webdev。网址：

https://github.com/fananchong/webdev