cocos creator 扩展编辑器以及定制项目构建流程

起因：因为游戏用cocos creator 打包app后包体比较大，顾策划想弄成分包下载，将打包后的res中个别较大的文件通过热更新的方式下载到游戏中，减少母包的大小。资源热更是通过官方提供文档：http://docs.cocos.com/creator/manual/zh/advanced-topics/hot-update.html?h=%E8%B5%84%E6%BA%90%E7%83%AD%E6%9B%B4%E6%96%B0 实现，但此时热更需要通过 node 执行很长一段命令才能把热更包打出来，顾查看creator 发现可以将这些功能集成到编辑器当中，实现自动化操作，一下文章记录一下 扩展编辑器和定制项目构建流程。

 

一：扩展编辑器

扩展编辑器需求如下: 

1：是否打包热更新包。

2：如果确定打包热更新包，勾选需要打包的文件夹（因为资源都是以文件夹的形式分类号，所以直接选择文件夹名来确定打包文件）。

这里本想直接修改creator 原来的构建发布面板，在原始面板中直接加入上述选项，但找了半天文档和代码没发现在哪里修改，所以自己按照文档中 http://docs.cocos.com/creator/manual/zh/extension/your-first-extension.html 规则自己生成了一个点击构建发布前的面板，一下为自定义面板的样子。

在官方文档中很全面的介绍了如何构建自定义的面板，这里我也就不啰嗦了，大家有需求的话多读读文档。这里只说一下我遇到的问题，和自己的总结。

 

自定义扩展包目录结构如下，需在packages下创建一个属于自己扩展包的单独文件，我的更新配置扩展包名为build

在build文件下有两个文件main.js package.json 和一个文件夹panel。

其中 package.json文件为此扩展包的配置文件

name // 扩展包的名字 （这里的名字和下放message 中 ：前面的 build： 有关）

version // 扩展包的版本

main // 扩展包入口函数

main-menu （可选） // 在creator 中显示的按钮，这里的message 是点击按钮触发的消息

这里 build: open 消息会向主程序发送一条open的消息，我们在主窗口函数（main.js 中进行注册就可以接收到这个消息了）

 

panel （可选）// 扩展包对应的面板 （也就是我们 build: open  message打开的面板）

panel中的main为 面板的入口函数

type：为窗口类型

其中 main.js文件为扩展包主程序入口文件，主程序被扩展包正确载入后和扩展包卸载进行到最后阶段

分别会触发 load和unload方法， 除此之外，还包含一个messages方法，在messages中会监听发送给主程序的消息

如下：

注：我自己的load 和unload方法是用来监听cocos creator 构建发布后的回调，在回调的方法onBeforebuildFinish中通过执行node的方法实现自动打包逻辑，因为项目各异，这里就不发相应代码了，如果各位需要定制发布模板 可以参照文档：http://docs.cocos.com/creator/manual/zh/publish/custom-project-build-template.html?h=before-change-files%27

接着上面的：这里messages 为注册主程序消息 还记得我们在package.json 中有一个main-menu字段，这里定义的按钮会在

creator的上方按钮区域显示，点击打开后会触发  build: open （build为扩展包名，open为消息名）消息。这时主程序中 messages - open 函数会被回调 在这里我们通过编辑器方法打开build的面板

注：这个被打开的面板就是我们文章一开始提到的面板了，因为目前http://docs.cocos.com/creator/manual/zh/extension/using-ui-kit.html 文档大部分还在编辑中，creator 应该是对css 进行了二次封装，我本人也是通过他之前提供的例子自己瞎弄了一下，如果有需求，大家可以根据 http://docs.cocos.com/creator/manual/zh/extension/extends-panel.html 这个例子文档修改一下自己的面板。

面板被打开的时候会调用panel的入口函数 panel/index.js，我看官方提供的creator-luacpp-support工具是将css和html都分开了，我是直接都写到了一起，这里的逻辑也不难，点击文件夹名点击确定后，会通过 Editor.Ipc.sendToMain('build:updateList', updateArray); 方法把 需要打包的文件夹名发送给主程序（触发主程序messages-updateList方法），然后主程序做记录，这样主程序触发构建发布后回调方法onBeforebuildFinish的时候讲之前存储的打包列表通过命令行的形式传送给打包脚本 进行自动打包生成热更文件。

 

以上便是最近研究的cocos creator 扩展编辑器以及定制项目构建流程的分享，哪里有说的不对或表达的不明白的地方，还请大家多多指出，多泄。~