扩展系统

在编写扩展之前，我们首先需要了解一下 Cocos Creator 3D 内，扩展的基础结构。

Cocos Creator 3D 编辑器是基于 GitHub 的 Electron 内核开发。Electron 是一个集成了 Node.js 和 Chromimu 的跨平台开发框架。

在 Electron 的架构中，一份应用程序由主进程和渲染进程组成，其主进程负责管理平台相关的调度，如窗口的开启关闭，菜单选项，基础对话框等等。而每一个新开启的窗口就是一个独立的渲染进程。在 Electron 中，每个进程独立享有自己的 JavaScript 内容，彼此之间无法直接访问。当需要在进程之间传递数据时，就需要使用进程间通信（IPC）。 相关功能可以通过阅读 Electron’s introduction document 更深入的理解 Electron 中的主进程和渲染进程的关系。简单点说，Electron 的主进程相当于一个 Node.js 服务端程序，而每一个窗口（渲染进程）则相当于一份客户端网页程序。

Cocos Creator 3D 编辑器沿用了 Electron 的主进程和渲染进程的结构设计。所以扩展在编辑器内启动并运行的时候，扩展定义的 main 其实是在主进程启动，而 panels 定义的面板，则在渲染进程启动。进程结构简要概括如下：

  1. Browser
  2.   |- panelA
  3.   |- panelB
  4.   ...

通信

前面我们已经说到了两个进程之间的 JavaScript 内容是相互独立的，必须靠进程间通信的方式来交换数据。进程间通信实际上就是在一个进程中发消息，然后在另外一个进程中监听消息的过程。 Electron 提供了进程间通信对应的模块 ipcMain 和 ipcRenderer 来帮助我们完成这个任务。由于这两个模块仅完成了非常基本的通信功能，并不能满足编辑器，扩展面板与主进程之间的通信需求，所以 Cocos Creator 3D 在这之上又进行了封装，扩展了进程间消息收发的方法，方便扩展开发者和编辑器开发者制作更多复杂情景。更多说明请查看 消息系统

扩展的能力

扩展内拥有完整的 nodejs 环境，可以很方便的使用 npm 市场上大量的工具。用于完成自己想要的功能。

如果需要和其他功能交互，则需要对应功能开放对应的操作消息，我们在自己的扩展内，通过 消息系统 触发、查询、处理编辑器内的功能或者数据。已经开放的消息列表可以在顶部菜单 “开发者” - “消息列表” 面板里查看。

此外，还可以使用一些工具方便扩展的开发，比如：

  1. 使用 typescript 开发扩展，编译成 js 后，将编译后的 js 填入 package.json 里供编辑器运行。
  2. 面板里 template 渲染完成后，使用 vue 绑定数据，方便面板的交互开发。

扩展只约定了入口，在这中间可以使用大量的外部库进行开发流程的优化。