如何从0到1制作一款 Cocos Creator 插件？超详细开发指南来了！

在开发过程中，总少不了用到各类插件。Cocos Store 上提供了许多插件资源，但有时也需要我们自己动手去制作一些插件。本次，开发者 muzzik（马赛克）将分享 v3.x 插件开发流程与经验，一起来做插件吧！

Cocos Store 资源商店

首先，为什么要开发插件呢？

任何重复机械式的劳动都是无意义的，一切机械劳动皆可自动化，而插件能帮助我们实现自动化。

插件能给我们带来什么？

第一是时间。解决了自动化的问题，最大的好处当然是节省了我们额外的手动操作时间，正所谓寸金难买寸光阴，节约时间便是插件最大的价值。

其次是收益。我们可以把开发的插件发布到 Cocos 商店，给他人带来便利的过程中，也可以给自己带来额外的收益。

第三是生态。各类插件涵盖了开发的方方面面，将能帮助到更多开发者，我们的每个插件，都可以给 Cocos 的生态添砖加瓦。

第四是技术。插件开发所需要用到的技术包括但不限于 HTML、CSS、NodeJs、Vue，开发插件的同时，也可以帮我们拓展技术范围，增加个人竞争力。

本次，借这篇文章，我就从入门、进阶、深入三部分和大家分享一下开发 Cocos Creator 3.x 插件的流程，以及自己在实际开发中积累的经验，期待有更多的开发者加入到开发插件的行列中来！

PS. 限于篇幅，公众号仅展示正文部分，在论坛专贴中，我另附上了重点内容的参考与扩展链接，想做深入了解的小伙伴，可以直接前往论坛阅读：

https://forum.cocos.org/t/topic/144174

入门

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&