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

本文主要是介绍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();
};