各种插件在开发过程中总是必不可少的。Cocos Store 它提供了很多插件资源，但有时我们需要自己制作一些插件。这一次，开发者 muzzik（马赛克）将分享 v3.x 插件开发过程和经验，一起做插件吧！
Cocos Store 资源商店
首先，为什么要开发插件？
任何重复的机械劳动都是毫无意义的，所有的机械劳动都可以自动化，插件可以帮助我们实现自动化。
插件能给我们带来什么？
首先是时间。解决自动化问题最大的好处当然是节省了额外的手动操作时间。俗话说，很难买到每一寸时间。节省时间是插件的最大价值。
第二是收入。我们可以向开发的插件发布 Cocos 在给他人带来便利的过程中，商店也能给自己带来额外的好处。
第三是生态。各种插件涵盖了开发的各个方面，这将有助于更多的开发人员。我们可以给每个插件 Cocos 生态加砖加瓦。
第四是技术。插件开发所需的技术包括但不限于 HTML、CSS、NodeJs、Vue，在开发插件的同时，还可以帮助我们扩大技术范围，提高个人竞争力。
这一次，借用这篇文章，我将从入门、高级、深入三个部分与大家分享开发 Cocos Creator 3.x 在实际开发中积累的插件流程和经验，期待更多的开发者加入开发插件的行列！
PS. 由于篇幅有限，微信官方账号只显示文本部分，在论坛专贴中，我附上了关键内容的参考和扩展链接，如果你想成为一个深入了解的朋友，你可以直接去论坛阅读：
入门
1、创建插件
我们可以打开顶部菜单栏 扩展/创建扩展 打开插件创建面板。
插件放在哪里？打开顶部菜单栏 扩展/扩展管理器 找到我们的插件，点击 Open Folder 打开我们的插件根目录文件夹。
因为我们的插件一开始可能会依赖部分 npm 因此，模块需要初始化：
cd 插件根目录。
npm i。
2、package.json 简述
package.json 它是插件根目录中的一份文件，它包含了大量的信息，相当于插件的身份证，其中三个最重要的配置是：
main：关系到插件能否正常启动。
panels：与面板能否正常显示有关。
contributions：插件的大部分配置都在这里。
3、插件多语言
在开发过程中，我们经常使用多语言。如何实现插件多语言？事实上，这取决于一个放在插件根目录中 i18n 文件夹为了实现，存储在文件中的文件名称是语言代码，内容是导出对象。
插件多语言的基本使用方法是：
使用脚本：let str = Editor.I18n.t(‘first-panel.open_panel’)；常用于动态显示内容。
使用HTML：<ui-label value=“i18n:first-panel.open_panel”>；常用于面板。
JSON 使用中使用：“description”: “i18n:first-panel.description”；在 package.json 中使用。
4、通过消息启动插件面板
首先，我们需要注册一个菜单项才能启动插件面板 package.json 的 contributions.menu 在里面，写一个包含 path、label、message 属性数据。
这些内容代表了什么？
菜单路径：path + label = 扩展/demo_part1/默认面板。
点击菜单触发的消息：message。
监听消息
我们可以在 package.json 文件中的 contributions.messages 写入我们监控的信息名和触发的方法数组。
我们所有的事件都在 messages 里面注册，这里的 open-panel 就这是我们注册的事件，open_panel 触发方法名，因为没有指定面板名，所以触发方法名 main 接下来，让我们来看看内部方法。 open_panel 该方法做了什么？
看看回调做了什么
在 open_panel 我们调用了内部 Editor.Panel.open，这就是打开面板的方法。Editor.Panel.open 参数为“扩展名” | 扩展名.面板名”。
到这里点击菜单后，打开我们的插件面板。
5、编写插件面板的内容
首先是面板的一些基本属性，我们在 package.json 内的 contributions.panels 中定义：
title：面板标题。
type：dockable(可停靠) | simple(不能停靠)。
main：面板入口脚本文件夹，文件名称默认 index.js。
size：面板大小信息。
如何显示面板的内容控制？在 index.js 我们在文件中导出的对象，template 则为 html 内容，style 则为 css 内容。这篇文章涉及的内容比较深，可以去论坛专题文章查阅相关参考链接，深入了解。
6、消息系统
我们前面说过如何监控一条信息。让我们看看如何发送信息。
发送消息有三个接口，包括发送、请求和广播。详见官方文件。
查看默认定义的消息
打开菜单 开发者/消息列表 即可查看。
调试消息
新闻管理器中的新闻并不是编辑器中的所有新闻，那么我们如何知道我们的操作触发了什么新闻呢？使用新闻调试工具和菜单 开发者/新闻调试工具：
点击播放按钮(扫帚图标旁边的按钮)开始操作。
点击操作后的暂停按钮。
这样，我们就可以看到这个操作触发的所有新闻，包括新闻的参数。
7、场景脚本
简单地说，场景脚本是与编辑器中脚本运行的环境相同的脚本。当我们需要调用引擎接口时，我们需要使用它，如加载资源、获取节点等。
场景脚本在 package.json 中的定义
场景脚本结构
load：加载回调。
unload：卸载回调。
methods：场景脚本事件函数存储位置。
与场景脚本通信
我们可以通过消息系统默认定义的消息进行通信：
name：扩展名。
method：触发事件函数名。
args：事件参数。
8、配置系统
简单地说，配置系统是编辑环境下的文件读写工具。
我们可以在脚本中使用，没有任何前提条件，但需要注意的是，我们在写文件之前获得的第一个值必须是 undefined。可以通过 package.json 配置默认值。
9、插件编译
使用 ts 写插件自然需要编译成 js 才能使用。如何编译 ts 脚本呢？市场上有很多第三方编译器。在这里，我们选择通过 tsc（Typescript 语言自带编译器)进行编译。
我们可以在命令行输入以下命令编译脚本：
tsc -b [tsconfig 所在目录]：单次编译。
tsc -w [tsconfig 所在目录]：监听编译(在 ts 文件保存并更改后，将自动编译)。
脚本命令也可以配置，在 vscode 内可以通过 ctrl + shift + p 搜索和执行。
10、发布插件
插件开发完成后，我们可以发布到 Cocos 商店。发布前，建议您仔细阅读商店的插件资源发布规范：
确认后登录 Cocos 开发者中心：
点击商店 -> 卖家中心 -> 发布新资源。填写后，等待两三天的审核时间。如有任何问题，官方人员将与您联系。
进阶
1、了解主过程和渲染过程
当你接触插件开发时，你可能听说过主要的过程和渲染过程，但你不太了解它们，那么它们是什么呢？
主进程：package.json 中 main 脚本运行过程的属性(插件入口脚本)。
渲染进程：package.json 中 contributions.panels 中 main 脚本运行过程的属性(插件面板入口脚本)。
如何交互不同的过程
通过消息系统：最简单的方法。
通过 websocket：一般没有人这样做。
使用过程中的误解
数据不是共享的，而是单独的。这里经常犯的错误是认为他们使用相同的数据，实际上是两个单独的数据，不同过程之间的数据不会相互干扰。
不要把昂贵的计算逻辑放在主过程中。会造成放置在主过程中 Creator 最好将编辑器界面卡住，放在插件渲染过程中或单独打开个子过程中。
2、使用 element-plus
element-plus 是一个 web 前端常用的 UI 组件库，Cocos Creator 虽然编辑器也提供了一些插件 UI 组件，但可能不满足我们的需求，此时可以使用 element-plus。
3、html 和 css 调试技巧
开发插件时需要经常修改 html 与 css，不想每次都重新加载插件怎么办？
点击插件面板，然后按下插件面板 ctrl + shift + i 打开开发人员工具，可以直接编辑 html 与 css 效果是实时生效的，我们可以修改到预期的效果，然后将其移动到插件源代码。
4、扩展 inspector
inspector 简单来说就是属性检查器面板组件显示的内容。怎么定义 inspector？只需要在 package.json 中的 contributions 中声明即可。
与组件数据交互
inspector 自定义了我们的组件属性面板显示，那么如何与组件数据交互呢？有两种方法：
场景脚本。可以通过场景脚本 getScene 拿到场景根节点，找到我们的组件进行数据访问和修改。
消息系统。建议使用编辑器。我们不知道新闻内容可以通过新闻调试器获得。编辑器将依赖这些信息，如取消操作。
5、插件公共代码库
在插件开发过程中，我们可能会遇到几个插件使用相同的代码。此时，如果我们想只保留一个公共代码，我们可以在插件根目录中 tsconfig.include 添加我们的公共代码库路径。
但有一个问题是，插件编译后的路径结构与以前不一致。如何解决这个问题？我在这里写了一个小工具：插件编译器，可自动修改 package.json 自动复制依赖于引用公共代码库引起的路径不一致性 npm 包到输出目录，输出 zip。
下载和使用插件编译器：
深入
1、使用 Creator 制作插件 UI
看起来很复杂，实现起来并不难。插件面板也是一个 web 界面，而 web 界面可以同时嵌入， Cocos Creator 也可以输出 web 包，所以事情很简单。
通过 iframe 嵌入指定网站链接的标签可以实现插件面板显示 Creator 界面：
调试时：嵌入预览网站。
发布时：本地开个 http-server，指向编译后的 web 包装路径即可。
2、调试主流程代码
在开发过程中，可能会出现主流程报错但无法调试的情况。那么我们应该如何调试主流程呢？
首先设置 Cocos Dashboard 启动选项，path 后者是项目根目录：
然后打开 chrome://inspect/#devices 配置：
点击 Discover network targets 右侧的 configure 添加 localhost:5858。
最后，打开相应的项目，target 下面会有一个新项目，点击蓝色 inspect，这时，我们进入了主进程开发人员工具，可以使用 ctrl + p 搜索自己的插件 main.js 进行调试：
3、代码加密的方法
服务器中的逻辑。主要代码放在服务器上，插件面板只负责显示，即使代码被偷也没关系。
使用其它语言。使用 C、C++ 编译为 wasm，核心代码的破解基本结束。
混淆。这种方法，只防君子不防恶棍。
以上是本次分享的全部内容，希望对大家有所帮助！最后推荐几款我发布在上面 Cocos Store 感兴趣的小伙伴可以下载取用上面的插件和源码。
SDF 纹理生成工具：
根据节点名生成节点引用代码插件：
扩展编辑器菜单(使用插件)：
点击文末【阅读原文】去论坛专贴，查看有关情况 Cocos Creator 如果您有任何问题，请在帖子中与我沟通！
声明：易商讯尊重创作版权。本文信息搜集、整理自互联网，若有来源标记错误或侵犯您的合法权益，请联系我们。我们将及时纠正并删除相关讯息，非常感谢！
