cocos icon
    English
resource-icon
Perfect typescript plugin template v1.2.3
Category
Creator Extension Plugins
Author
AILHC
Creator Version Required
v3.1.1
Supported Platform
AndroidiOSHTML5
Rating
Sale Price
$ 0.42 (Individual)

Introduction

The perfect TypeScript plugin development template, breaking metaphysics, automatic compilation, and one-click packaging

Introduction

The plugin system of Cocos Creator is very powerful and allows developers to develop a variety of powerful and efficient plugins to assist game development. However, due to the fact that the 2.x plugin system itself does not fully support TS and various metaphysics, the threshold of plugin development is a little high.

I was new to plug-in development and felt it was very troublesome to do so. I wondered if there was a perfect solution that would allow me to develop plug-ins as smoothly as silk. Checked everywhere, also only found an immature scheme, as well as some evade methods, it is still very troublesome to use.

So I decided to do it myself. It allows you to write the reference script and NPM just as you would a 'Cocos Creator' script. You don't have to worry about path transitions or anything, just write it and debug it.

Then based on [EasyGameFramework] (http://aigamestudio.ailhc.gitee.io/easygameframeworkopen/#/) Framework of [egf - cli] (http://aigamestudio.ailhc.gitee.io/easygameframeworkopen/#/packages/cli/README) tools made this template

The 3.0 plugin architecture is much more powerful, and this template will make the difference between 2.x and 3.0 plugins much smaller

Help you develop plug-ins faster, more efficiently, and more easily, and get them on the Cocos store

Features

  1. Fully supported TS development (the renderer process can 'import' relative to path 'ts' and use the interface for path conversion) (for 2.x)
  2. Listening for Autocompile
  3. Support 'import' separate 'CSS' and 'HTML' files
  4. The code '(for 2.x)' is shared between the main process and the renderer process, and between multiple renderer processes
  5. Support 'NPM' module, package and output 'js'. After the release of the plug-in, there is no need to' NPM install '
  6. Support the renderer process to refer to the 'NPM' package installed by the plugin (for 2.x)
  7. Support one-key packaging into ZIP, directly take to the upload store background

Engine 2.x plug-in project directory structure


-- dist compile output directory

-- editor-api-dts editor interface declaration file

-- node_modules NPM module installation directory

-- src typescript source directory

    -- main main process code

    -- Renderer the process code

    -- Common code

-- egf-plugin-cccsshtml. Js Compiling plugin to import CSS and HTML files

-- egf.compile.js Compile the configuration file
If you add or modify the panel entry TS file (which is also renamed), you need to modify the compilation entry path in option.entry

-- Libs places some external JS libraries
-- FixRequire. Js references to correct rewrite logic
-- publish-pkg.json packages the configuration file

Engine 3.0 plug-in project directory structure

-- dist compile output directory

-- editor-api-dts editor interface declaration file

-- node_modules NPM module installation directory

-- src typescript source directory

    -- main main process code

    -- Renderer the process code

    -- Common code

-- egf-plugin-cccsshtml. Js Compiling plugin to import CSS and HTML files

-- egf.compile.js Compile the configuration file
If you add or modify the panel entry TS file (which is also renamed), you need to modify the compilation entry path in option.entry

-- publish-pkg.json packages the configuration file

Use

  1. Download the plugin
  2. Open the plugin project with an editor
  3. npm install or yarn install

    Development

  4. Start automatic compilation
    npm dev or yarn dev
  5. Start writing code
  6. Scripts that normally refer to relative paths Reference the NPM package normally
  7. You can also refer to '.html' and '.css'

Let the compiler take care of everything for you As smooth as silk

Compile

Introduction to Compiling Commands

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

-f Specifies the module specification. The script module specification for the plug-in iscommonjs

-m Compression js

-c Specify the compile configuration file,Default:egf.compile.js

-ngd No declaration file is output

Execute compilation command

npm build 或 yarn build

Packaging

The packaging tool uses gulp, and I have some basic packaging tasks built in, which can be combined on demand

Like ZIP only or copy and ZIP only, no compile and so on

Packaging Introduction

{
    //A file that needs to be included in the zip
    // **/* Means copy all files
    // !node_modules/**/* Indicates that the node is not copied_ Modules and all its subfolders
    //(Ignore configuration must be after include configuration)
    //Matching rule reference:https://blog.csdn.net/wildye/article/details/80516847
    //Document reference:https://www.gulpjs.com/docs/api/src/
    "files": [
        "dist/**/*",
        "libs/**/*",
        "package.json",
        "package-lock.json",
        "README.md"
    ],
    //Dependency that is automatically installed during packaging, * means that all dependencies are installed (if onlydependencies = true, otherwise, all dependencies including devdependences are installed)
    //It can be used to install libraries that are not supported during construction, such as fs-extra. I will fill in "include dep": ["fs-extra"],在egf.compile.js填 externalTag: ["fs-extra"],
    "includeDep": [
        "*"
    ],
    //Source warehouse address. Taobao source is used by default. You can fill in your own warehouse source
    "installRegitstry": "https://registry.npm.taobao.org",
    //Install dependencies dependency only
    "onlyDependencies": true
}

Packaging Command

npm run publish-pkg 

OR

yarn run publish-pkg 

Output to publish by default, with package.json Version number in 比如 plugin_template_v1.0.1_.zip

使用视频

bilibli;

Notice

  1. If modified package.json You need to modify the name field of package.json The corresponding message name in
  2. modify package.json The compilation needs to be restarted after the name field in the

    CHANGELOG

1.2.4

2021/6/15

  1. Fixed an issue where ZIP decompression might fail after packaging

1.2.3

2021/5/10

  1. Compatible 2.4.5

1.2.2

2021/4/17

  1. Fix default publish file missing
  2. Fix the bug of recompiling after modifying the name of the plug-in folder, which causes the error of reference JS
  3. Note: modification package.json The compilation needs to be restarted after the name field in the

1.2.1

2021/4/12 Fix a lot of problems that are not included in the files, and add a document to explain the rules of copying files

1.2.0

2021/4/8 Add a one click build package to zip, and automatically install NPM non development dependencies (to avoid manually eliminating dependencies or allowing users to install dependencies)

1.0.1

first publish

QQ group:1103157878

Follow the author for more content

WeChat search official account: 玩转游戏开发

Or scan code to pay attention to:img

User Rating

Average Rating
(5)
Total users participating at this score: 1

Reviews

句读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'.

Author

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

yoey 2021-04-03 01:53

有cocos3的ts模板吗 ??

Author

你指的是插件模板?有啊,点一下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号