• 你的第一个扩展包
    • 创建并安装扩展包
    • 定义你的包描述文件：package.json
    • 入口程序
    • 运行扩展包程序

    你的第一个扩展包

    本文会教你如何创建一个简单的 Cocos Creator 扩展包，并且向你介绍一些扩展包中的基本概念。通过学习，你将会创建一个扩展包，并在主菜单中建立一个菜单项，并通过该菜单项在主进程中执行一条扩展指令。

    创建并安装扩展包

    创建一个空文件夹命名为 “hello-world”，并在该文件夹中创建 main.js 和 package.json 两个文本文件。该扩展包的结构大致如下：

    1. hello-world
    2.   |--main.js
    3.   |--package.json

    将该文件夹放入到 ~/.CocosCreator/packages（Windows 用户为 C:\Users\${你的用户名}\.CocosCreator\packages），或者放入到 ${你的项目路径}/packages 文件夹下即可完成扩展包的安装。

    定义你的包描述文件：package.json

    每个包都需要一份 package.json 文件去描述他的用途，这样 Cocos Creator 编辑器才能知道这个包要扩展什么，从而正确加载。值得一提的是，虽然 package.json 在很多字段上的定义和 node.js 的 npm-package 相似，他们仍然是为不同的产品服务的，所以从 npm 社区中下载的包，并不能直接放入到 Cocos Creator 中变成插件。

    我们在这里做一份简单的 package.json：

    1. {
    2.   "name": "hello-world",
    3.   "version": "0.0.1",
    4.   "description": "一份简单的扩展包",
    5.   "author": "Cocos Creator",
    6.   "main": "main.js",
    7.   "main-menu": {
    8.     "Packages/Hello World": {
    9.       "message": "hello-world:say-hello"
    10.     }
    11.   }
    12. }

    解释：

    • name String - 定义了包的名字，包的名字是全局唯一的，他关系到你今后在官网服务器上登录时的名字。
    • version String - 版本号，我们推荐使用 semver 格式管理你的包版本。
    • description String（可选） - 一句话描述你的包是做什么的。
    • author String（可选） - 扩展包的作者
    • main String (可选) - 入口程序
    • main-menu Object (可选) - 主菜单定义

    入口程序

    当你定义好你的描述文件以后，接下来就要书写你的入口程序 main.js 了。定义如下：

    1. 'use strict';
    3. module.exports = {
    4.   load () {
    5.     // 当 package 被正确加载的时候执行
    6.   },
    8.   unload () {
    9.     // 当 package 被正确卸载的时候执行
    10.   },
    12.   messages: {
    13.     'say-hello' () {
    14.       Editor.log('Hello World!');
    15.     }
    16.   },
    17. };

    这份入口程序会在 Cocos Creator 的主进程中被加载，在加载成功后，他会调用入口程序中的 load 函数。并且会将定义在 messages 字段中的函数注册成 IPC 消息。更多关于入口函数中的消息注册，以及 IPC 消息的内容，我们会在 IPC简介 中讲解。

    这里我们只要明白，入口函数中的 messages 字段中的函数，将会在主进程的 IPC 监听模块中，注册一份消息，其格式为 ${扩展包名}:${函数名}，并将对应的函数作为 IPC 响应的函数。

    运行扩展包程序

    现在你可以打开你的 Cocos Creator，你将会发现你的主菜单中多出了一份 Packages 的菜单，点击 Packages 菜单中的 Hello World 将会发送一个消息 “hello-world:say-hello” 给我们的扩展包的 main.js， 它会在 Creator 的控制台中打印出 “Hello World” 的日志信息。

    恭喜你完成了第一个简单的编辑器扩展工具。