探索Cocos H5 正确的开发姿势（下）

厚积薄发，Cocos今后将采用两周一次的频率

为喜爱Cocos的各位献上更精彩更带劲的直播

请耐心再等等，我们下周同一时间同一地方

不见不散～

斗鱼ID:726225

---

继《探索Cocos H5正确的开发姿势（上）》一文后，今天继续为大家送上由晓衡带来的干货好文。

回首自己三年多的Cocos2d 游戏开发经历，直到深入使用Cocos2d-js 以及后期开始使用Creator 做项目时，这才逐渐打开了Javascript 神奇世界的大门。

现在回过头来忽然意识到，自己选择的不仅仅是Cocos2d-html5，更多选择的是Javascript；不只是简单地选择了这门脚本语言，更偏重于选择的是Javascript 平台和生态圈，这才是自己为什么一直对Cocos2d-html5 不离不弃的原因。

今天，我将会重点介绍入门Javascript 几个经典又实用的工具，希望能对大家的开发生涯献上一点绵薄之力。

1

nodejs

nodejs 的出现是Javascript 模块化诞生的标志

从此我们可以使用Javascript 构建服务端应用

如果不了解nodejs 那么你肯定也不知道如何将Javascript 代码模块化。有了模块化你可以像编写c++、Java 那样引入模块。团队开发才能将功能有效拆解，做出自己可复用的模块，建立自己的代码库。

我认为模块化是编写Cocos2d-html5 开发的第一步，我在项目编码中一律采用nodejs 代码风格，利用Browserify 或Webpack 可以将代码完美地运行在浏览器和原生上。

2

npm

npm 全称是Node Package Manager

NodeJS 包管理和分发工具

已成为非官方的发布Node 模块(包)的标准

npm 上面承载了数以万计的Node 模块，纯Javascript 编写的模块可以在前后端通用，理所当然Cocos2d-html5 中也能使用。其中还有各种奇思妙想的Node 工具让人拍案叫绝，同时还能提高工作效率。

如果正在使用Cocos2d-html5 技术，却对npm 了无所知的话，这篇文章的出现会给您带来很大的帮助。

Cocos2d-html5 游戏代码工程中常用的npm 模块有：

lodash

undersocre(已经被lodash替代了)

protobufjs

async

moment

socket.io

3

Grunt & Gulp

Grunt 是Javascript 世界的构建工具

对于需要重复的任务实现自动化

自动化工具可以减轻劳动量，简化工作

我在项目中利用Grunt 解决了客户端程序反复开关目录、Ctrl+C、Ctrl+V 鼠标点来点去繁琐又无技术含量的工作。这些每天消耗着我们的大脑能量，重复的工作主要有：从SVN 获取美术、策划输出的资源，把它们复制到客户端工程不同目录，有的还需要压缩、将Excel 转换成JSON 或MySQL 表。

Cocos2d-html5 项目开发中用到的Grunt 插件主要是：

grunt-shell

grunt-sync

编写命令工具的npm 模块有：

shelljs

node-xlsx

yargs

plist

rd

mysql

Gulp.js是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务，利用Node.js 流的威力快速构建项目并减少频繁的IO 操作。

Cocos Creator 中集成的自动化构建工具就是Gulp，你可以在安装目录中找到相关脚本文件。当你修改过Creator 引擎源码时，记得一定要使用Gulp 命令重新编译引擎才能生效，方法步骤如下：

命令终端切换到目录: Creator 安装目录/engine

执行命令：npm install (提前安装好nodejs\npm)

执行命令：gulp ，等待编译完成即可。

4

ES6

ECMAScript6(以下简称ES6)

是JavaScript 语言的下一代标准

在Cocos Creator 项目中，我迫不急待地尝试了ES6 的新语法编写代码，它让我体会到撸代码的乐趣。常用的新语法有：字符串模块、箭头函数、对象解构、默认参数、类定义。

在Cocos Creator 中你可以使用所有以上的新语法，因为Creator 已有Bable 编译器。如果Cocos2d-js 要使用需要自己配置环境，这也不是一大难题。

5

Bable

Bable是JavaScript 编译器

你可以使用下一代Javascript 语法写代码

不用浏览器提供支持

在Creator 中已经集成了Babel，可以减少代码量、提高可读性。建议在新项目中使用 ES6新的语法规范，同时也能保持与Javascript 语言的与时俱进。

6

Browserify & Webpack

Browserify可以使用类似于node 的require 方式

组织浏览器端的Javascript 代码

通过预编译让前端Javascript 

直接使用Node NPM 安装库

Browserify 才是真正将前端Javascript 模块化的主角。我最早在Cocos2d-js 项目就使用它来组织代码。它解决了在Cocos2d-js 中代码加载顺序问题，同时还可以编写类似node 风格的代码，使用npm 管理三方库。Creator 已经集成了Browserify，在安装目录中能够看到。

我在Cocos2d-js 项目中还尝试过Webpack，比Browserify 更强大。有的前端工程直接使用Webpack 代替了Browserify 和Grunt。最早我以为Creator 应该是Webpack+Grunt+Babel，实际上是Browserify+Glup+Babel。Webpack 是Javascript 世界不可忽视的构建工具。

7

ESlint

ESLint 是可配置的JavaScript 代码校验工具

不仅可以校验最新语法

还可以配置规则约束代码风格

严格到一个空格或标点

如果是正式项目强烈建议在日常编码时使用ESlint，以Airbnb JavaScript Style Guide 语法规范为根基，再根据实际情况配置调整。有了ESlint 的保驾护航，我相信Javascript 代码会更加完整和强大，项目质量也能蹭蹭蹭往上猛涨。

写在结尾的话

游戏行业的Cocos2d-js、Cocos Creator 市场总是很难招到合适的人才。每每在与HR聊天过程中经常能听到『现在要找个做Cocos2d-js\CocosCreator 的人才一周都没人冒泡，c++和lua 的真心倒是挺多』。究其原因，不过是技术不够到位、体会不到Cocos2d-js\CocosCreator 开发乐趣、个人能力不愿再多花时间总结提升等等。

经过一段时间的思索，我将自己在Cocos2d-html5 累积的项目经验和开发技术制作成简短视频并整理成文，就是希望入门者能少走一些弯路，多花时间在提升Cocos2d-js\CocosCreator 开发工作上。

毕竟，强大技术才是高层人才的敲门砖！

↙↙↙戳视频进入，观看更详细的解析

 ■  ■   ■

再不戳［新版二维码］看看

Cocos 喊你回家跪搓衣板！