中文
resource-icon
完美typescript插件模板 v1.2.3
类别
Creator扩展 插件
作者
AILHC
Creator版本要求
v3.1.1
支持平台
AndroidiOSHTML5
评分
售价
¥ 2.99 (个人)

介绍

plugin_template

基于egf-cli编译工具的插件开发模板,`自动编译`,`一键打包`

简介

Cocos Creator的插件体系非常强大,可以让开发者开发出各种强大高效的插件来辅助游戏开发,但由于2.x插件体系本身不完全支持ts,还有各种玄学,导致插件开发的门槛有点高。

我刚接触插件开发,就觉得这样开发非常麻烦,就想有没有完善一点的方案,让我如丝般顺滑地开发插件。到处查了一下,也只查到了一个不成熟的方案,以及一些规避方法,用起来还是很麻烦。

所以我决定自己整了这一套方案。它可以让你像在写Cocos Creator脚本一样,引用脚本和npm不用关心路径转换什么的,就只管写,调试就完事了。

于是基于EasyGameFramework 框架的egf-cli工具制作了这个模板

3.0的插件体系更加强大了,这个模板可以让2.x插件和3.0插件之间的差异大大减小

帮助大家更快、更高效、更方便地开发插件,上架Cocos商店,赚Q

特性

  1. 完全支持ts开发(渲染进程可以import相对路径ts,不用而外使用接口进行路径转换)(针对2.x)
  2. 监听自动编译
  3. 支持import单独的csshtml文件
  4. 主进程和渲染进程,以及多个渲染进程之间共用代码(针对2.x)
  5. 支持将npm模块,打包输出js,发布后的插件就不用npm install
  6. 支持渲染进程引用插件安装的npm(针对2.x)
  7. 支持一键打包成zip,直接拿去上传store后台

引擎2.x插件项目目录结构

-- dist 编译输出目录

-- editor-api-dts 编辑器接口声明文件

-- node_modules npm模块安装目录

-- src typescript源码目录

    -- main 主进程代码

    -- renderer 渲染进程代码

    -- common 共用代码

-- egf-plugin-cccsshtml.js 编译插件,用于import css 和 html文件

-- egf.compile.js 编译配置文件
    如果有增加或者修改面板入口ts文件(改名也属于),则需要修改option.entry里的编译入口路径

-- libs 放置一些外部js库
    -- fixrequire.js 引用纠正重写逻辑
-- publish-pkg.json 打包配置文件

引擎3.0插件项目目录结构

-- dist 编译输出目录

-- editor-api-dts 编辑器接口声明文件

-- node_modules npm模块安装目录

-- src typescript源码目录

    -- main 主进程代码

    -- renderer 渲染进程代码

    -- common 共用代码

-- egf-plugin-cccsshtml.js 编译插件,用于import css 和 html文件

-- egf.compile.js 编译配置文件
    如果有增加或者修改面板入口ts文件(改名也属于),则需要修改option.entry里的编译入口路径

-- publish-pkg.json 打包配置文件

使用

  1. 下载插件
  2. 用一个编辑器打开插件工程
  3. npm installyarn install

    开发

  4. 启动自动编译
    npm dev 或 yarn dev
  5. 开始写代码
    1. 正常的引用相对路径的脚本
    2. 正常引用npm包
    3. 还可以引用htmlcss

一切都让编译给你处理好了 如丝般顺滑

构建

构建脚本解释

"scripts": {
    "build": "egf build -f cjs -m -ngd -c"
},

-f 指定模块规范,插件的脚本模块规范为commonjs

-m 压缩js

-c 指定编译配置文件,默认egf.compile.js

-ngd 不输出声明文件

构建命令

npm build 或 yarn build

打包

打包工具使用的是gulp,我内置了一些基本的打包任务,可以按需组合

比如只zip或者只复制和zip,不编译之类的

打包配置讲解

{
    //需要包含在zip中的文件夹
    // **/* 表示复制所有文件
    // !node_modules/**/* 表示不复制node_modules以及其所有子文件夹
    //(忽略配置一定要配在包含配置之后)
    //匹配规则参考:https://blog.csdn.net/wildye/article/details/80516847
    //文档参考:https://www.gulpjs.com.cn/docs/api/src/
    "files": [
        "dist/**/*",
        "libs/**/*",
        "package.json",
        "package-lock.json",
        "README.md"
    ],
    //打包时自动安装的依赖,* 表示安装所有dependencies依赖(如果onlyDependencies=true,否则时安装所有依赖包括devDependencies)
    //可以用来安装构建时不支持构建出来的库,比如fs-extra,我就会填:"includeDep": ["fs-extra"],在egf.compile.js填 externalTag: ["fs-extra"],
    "includeDep": [
        "*"
    ],
    //来源仓库地址,默认用淘宝源,可以填自己的仓库源
    "installRegitstry": "https://registry.npm.taobao.org",
    //只安装dependencies依赖
    "onlyDependencies": true
}

打包命令

npm run publish-pkg 
或
yarn run publish-pkg 

默认输出到publish中,会带上package.json中的版本号 比如 plugin_template_v1.0.1_.zip

使用视频

bilibli;

注意事项

  1. 如果修改插件所在的文件夹名,则需要重新启动编译
  2. 如果修改package.json的name字段,则需要修改package.json中的对应的消息名

更新记录

1.2.3

2021/6/15

修复发布压缩成zip,zip包可能解压失败的问题

1.2.2

  1. 去掉package.json中的package_version字段,修复导致Creator3.1加载不了的bug
  2. 更新编译工具版本,更新编译命令,不导出 sourcemap

1.2.1

2021/4/12 修复很多文件没包含的问题,并增加了发包复制文件匹配规则讲解文档

1.2.0

2021/4/8 增加了一键构建打包成zip,并且自动安装npm非开发依赖(避免手动剔除依赖或者让用户安装依赖)

版本升级指南

  1. 打包功能

    gulpfile.js、publish-pkg.json 和 package.json中devDependencies的依赖字段到你的项目,然后执行

    yarn install 或 npm install 

    复制package.json的scripts中的publish-pkg去你的项目

    执行以下命令就可以打包了

    yarn run publish-pkg 或 npm run publish-pkg
  2. 针对2.x的升级(3.0不需要)(主要是fixrequire.js的路径改了)

    复制libs文件夹、 egf.compile.js

    最后删掉根目录下的/fixrequire.js即可

  3. 复制editor-api-dts中的声明文件

1.0.1

初次提交

加群交流反馈

QQ群:1103157878

关注作者获取更多内容

微信搜索公众号:玩转游戏开发

或扫码关注:img

用户评分

平均评分
(5)
共有 1 位用户参与评分

评论

句读177 2021-05-04 22:56

请问能升级tslib的版本吗,用map解构有报这个错误,This syntax requires an imported helper named '__spreadArray' which does not exist in 'tslib'. Consider upgrading your version of 'tslib'.

作者

这个tslib,你可以自己安装的。 npm install tslib 详细问题可以加群问我。发个图片啥的。

yoey 2021-04-03 01:53

有cocos3的ts模板吗 ??

作者

你指的是插件模板?有啊,点一下For Creator3.x下载或者,打开3.0进去商城下载插件就可以了

AILHC 2021-03-28 13:56

使用介绍显示不完全~

AILHC 2021-03-28 13:54

买不了上当买不了吃亏~

  • 1

2020 © Cocos.com版权所有

增值电信业务经营许可证:闽B2-20160169

闽ICP备14002653号-6

闽公网安备 35020302033941号