本文主要是介绍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种情况：
- 页面WebSocket => 支持websocket协议的游戏服务器
- 页面WebSocket => TCP代理服务器 => TCP协议游戏服务器
正式外网服务必定使用1。
其他用途，可1、可2。
浏览器跨域问题
正式情况不应该出现浏览器跨域问题。
即，游戏服务器必须提供可跨域的方式。如 支持 GET 方式请求，则浏览器有方法绕过跨域问题。
否则，则只能在浏览器端通过增加些启动参数，关闭浏览器某些安全功能。来绕过跨域问题。
通用的开发用web服务器
为了便利开发，可以把上述这些问题，集成到一个通用的辅助web服务器中。
可以参考本人github上的项目webdev。网址：
https://github.com/fananchong/webdev
这篇关于H5实践（2）- H5辅助开发环境搭建的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
