木匣子

Web/Game/Programming/Life etc.

cocos2d-jsList

cocos2d-jsList 是一个用来自动生成用于 cocos2d-js/cocos2d-html5 代码列表(jsList)的小工具。jsList 位于 project.json 中,用来指明 cocos2d-js 项目代码的加载顺序,详情可见官方文档

由于众所周知的原因,要处理 cocos2d-js 的 js 依赖并不容易,很多项目依然使用最原始的方式进行开发,而不是使用模块化管理。所以还是需要手动维护 jsList 列表来处理代码依赖(例如类继承)。

为了减少一些工作量和手动处理带来的失误,于是我写了 cocos2d-jsList 这个小工具。

项目地址: https://github.com/mutoo/cocos2d-jsList

安装 Install

jslist 使用 node.js 编写,可以很方便地使用 npm 进行安装:

$ npm install jslist -g

由于 jslist 是一个命令行工具,所以需要使用 -g 选项安装到全局目录。

使用 Usage

首先需要在 project.json 里面添加 jsListOrder 字段

{
  ...
  jsListOrder: [
    "src/**/*.js"
  ]
  ...
}

jslist 使用 node-glob 工具来进行文件名匹配。使用 *.js 可以匹配指定目录下的 js 文件,而 **/*.js 可以遍历其子目录。具体的用法可以参见 node-glob 官方文档。

然后进入项目根目录,执行 jslist 即可获得 jsList 列表:

$ cd /path/to/your/cocos2d-js/project
$ jslist

更多的用法请参见:

$ jslist --help

进阶 Advance

可以按照需要的顺序将文件列出:

jsListOrder: [
  "src/**/*.js"
  "src/resource.js",
  "src/app.js"
]

以上配置可以保证 src/app.js 始终在列表的最后,跟在 src/resource.js 后面。

这对于处理依赖很有帮助,例如可以将 /lib/ 目录中的代码全部前置,或者将一个超类提前到同目录的其它文件之前:

jsListOrder: [
  "src/lib/**/*.js",
  "src/controller/SuperController.js",
  "src/controller/**/*.js",
  "src/model/**/*.js",
  "src/view/**/*.js",
  "src/**/*.js",
]

示例 Example

{
    "project_type": "javascript",
    "debugMode": 1,
    "showFPS": true,
    "frameRate": 60,
    "id": "gameCanvas",
    "renderMode": 0,
    "engineDir": "frameworks/cocos2d-html5",
    "modules": [
        "cocos2d",
        "cocostudio"
    ],
    "jsListOrder": [
        "src/lib/puremvc-1.0.1.js",
        "src/lib/**/*.js",
        "src/utils/**/*.js",
        "src/const.js",
        "src/lang.js",
        "src/controller/command/context/ContextCommand.js",
        "src/controller/**/*.js",
        "src/model/**/*.js",
        "src/view/mediator/context/ContextMediator.js",
        "src/view/**/*.js",
        "src/**/*.js",
        "src/resource.js",
        "src/app.js"
    ],
    "jsList": [
        "src/lib/puremvc-1.0.1.js",
        "src/lib/puremvc-statemachine.1.0.js",
        "src/lib/underscore.js",
        "src/utils/helper.js",
        "src/const.js",
        "src/lang.js",
        "src/controller/command/context/ContextCommand.js",
        "src/controller/command/CheckUserAndLoginCommand.js",
        "src/controller/command/ConnectToServerCommand.js",
        "src/controller/command/context/AddChildContextCommand.js",
        "src/controller/command/context/AddNextContextCommand.js",
        "src/controller/command/context/BackContextCommand.js",
        "src/controller/command/context/CloseContextCommand.js",
        "src/controller/command/context/RunSceneWithContextCommand.js",
        "src/controller/command/startup/InjectFSMCommand.js",
        "src/controller/command/startup/PrepControllerCommand.js",
        "src/controller/command/startup/PrepModelCommand.js",
        "src/controller/command/startup/PrepViewCommand.js",
        "src/controller/command/startup/StartupCommand.js",
        "src/model/proxy/context/ContextProxy.js",
        "src/model/proxy/context/GroupProxy.js",
        "src/model/proxy/ServersProxy.js",
        "src/model/proxy/UserProxy.js",
        "src/model/vo/context/Context.js",
        "src/model/vo/context/Group.js",
        "src/model/vo/Server.js",
        "src/model/vo/Token.js",
        "src/model/vo/User.js",
        "src/view/mediator/context/ContextMediator.js",
        "src/view/mediator/ContextTestMediator.js",
        "src/view/mediator/DirectorMediator.js",
        "src/view/mediator/LoginMediator.js",
        "src/view/mediator/MainMediator.js",
        "src/view/mediator/NotificationMediator.js",
        "src/view/mediator/ServersMediator.js",
        "src/view/ui/ContextTestLayer.js",
        "src/view/ui/LoginLayer.js",
        "src/view/ui/MainLayer.js",
        "src/view/ui/NotificationLayer.js",
        "src/view/ui/ServersLayer.js",
        "src/resource.js",
        "src/app.js"
    ]
}