Expansion module
First, we create an Egret empty project that does not reference any modules, enter on the command line
egret create demo --type empty
You will see a egretProperties.json file in the project folder , this file describes some information about the current project.
It contains a modules field, this part is used to configure extension modules and third-party libraries.
For unified management, the official Egret library is presented in modules. The purpose of this design is to avoid loading unneeded modules, reduce the size of the final code, and improve the loading speed.
At present, the official library of Egret is divided into 8 modules
The core library necessary for egret game Class libraries that will be used to make games, such as MovieClip, URLLoader, etc. res resource loading library, all work involving resource loading can be done through this module tween animation easing class dragonbones keel animation library, used to make some complex animation effects The WebSocket library used by socket to communicate gui old version of the UI library The new UI library of eui is more convenient to use
Configure whichever library you need to use. For example, if I want to use game tween euithese 3 modules, I just need to add them to the configuration file like the following.
Then use the egret build -ecommand on the command line, and the engine will automatically put the used class library into your project.
You will find that libs/modules there is only one egret folder in the project folder, but now there are three more folders game eui and tween, these are the class libraries used.
Similarly, if you delete the module name in the egretProperties.jsonlibs/modules configuration file, the corresponding class library will also be deleted from the folder.
Projects created with egret create project_namecommands will come with 4 official modules by default:egret game res tween
Standard third-party library
Prepare third-party libraries
The third-party library can be a standard ts library, or a ready-made js library you download online, or a js library written by yourself.
Due to the difference in grammatical structure between js and ts, the API of the js library cannot be called directly in ts, so the TypeScript team provides a set of fictitious declaration syntax, which can describe the API of existing code in the form of header files, extension Name d.ts (the d.ts name reminds the compiler that this kind of file doesn't need to be compiled). This set of fictitious definition syntax makes you do not need to implement the code in the function body, similar to defining interfaces and abstract classes.
Fortunately, at present, most of the popular js class libraries have been officially provided, or the corresponding d.ts files have been provided by enthusiastic community developers. Of course, if not, you can also write your own. Here's a tutorial in great detail, which also includes a huge d.ts library, and a way to manage these libraries: using the JS class library .
In addition, due to the rapid update of some popular js libraries, there may be a problem that the definition of the d.ts file you find is inconsistent with the version of the js library, and the API in it does not correspond exactly. In this case, either look for the corresponding version of the js library, or you need to modify the d.ts file yourself.
As for the specific modification method, on the basis of comparing the original d.ts, you may also need to be familiar with the syntax of the ts interface. You can refer to here: ts interface tutorial .
Create third-party modules
When we are ready to use the third-party library, we also need to compile it into the module structure required by egret.
For example, there is now a js library called weixinapi, which contains 3 files
jweixin-1.0.0.js jweixin-1.0.0-additional.js weixinapi.d.ts
Step 1 To create a project file for the egret third-party library, enter on the command line
cd .. (jump out of the Egret project first ) and then create a third-party library project
egret create_lib libsrc
Third-party library projects and Egret projects cannot be nested. Please do not create third-party library projects under the Egret project directory.
You will find that the structure of the third-party library project you just created is different from the Egret project we usually see. It contains two empty folders bin、src、libs（如果没有请自行加上）and a package.json configuration file.
Step 2 Copy the prepared three files to the src folder.
Step 3 If you need to refer to the code of other third-party libraries, please put the referenced library files (mainly .d.ts files) in the libs directory, and do not put anything other than .d.ts under libs. .ts files.
Step 4 : Open package.json, and write the three files under files. If the files have a sequential order, you must pay attention to the order.
In the package.json file:
{
"name": "egret",
"version": "3.1.2",
"modules": [
{
"name": "weixinapi",
"description": "weixinapi",
"files": [
"jweixin-1.0.0.js",
"jweixin-1.0.0-additional.js",
"weixinapi.d.ts"
],
"root": "src"
}
]
}
Step 5 Enter the compile command at the command line
egret build libsrc (referring to libsrc in " egret create_lib libsrc " above )
After the compilation is completed, you will find that a weixinapi folder is generated under the bin folder (the folder name is determined by "name": "weixinapi" in the package.json file ), and there are 3 files in it
weixinapi.d.ts description file weixinapi.js is the js library used in debug mode in the Egret project weixinapi.min.js In the Egret project, the js library used in the official version after the release is compressed, and its volume is smaller than jszip.js
Use third-party modules
Similar to using the official extension module method modules, fill in the relevant information
In egretProperties.json file:
{
"native": {
"path_ignore": []
},
"publish": {
"web": 0,
"native": 1,
"path": "bin-release"
},
"egret_version": "3.1.2",
"modules": [
{
"name": "egret"
},
{
"name": "res"
},
{
"name": "eui"
},
{
"name": "weixinapi",
"path": "../libsrc"
}
]
}
"name": "weixinapi" the name of the third-party library "path": "../libsrc" The path of the third-party library we just created, absolute path or relative path
It should be noted here that weixinapi needs to be placed outside the Egret project directory.
Finally, use the egret build -e command in the command line, and the engine will refer to the custom third-party library. Under the libs/modules path, you will see the jszip library, and in index.html the modules_files block, the script tag of jszip will be added.
<!--This tag is a javascript file generated by means of a third-party library provided by egret. After removing the modules_files tag, the library file load list will not change, please be careful! -->
<!--modules_files_start-->
<script egret="lib" src="libs/modules/egret/egret.js" src-release="libs/modules/egret/egret.min.js"></script>
<script egret="lib" src="libs/modules/egret/egret.web.js" src-release="libs/modules/egret/egret.web.min.js"></script>
<script egret="lib" src="libs/modules/res/res.js" src-release="libs/modules/res/res.min.js"></script>
<script egret="lib" src="libs/modules/eui/eui.js" src-release="libs/modules/eui/eui.min.js"></script>
<script egret="lib" src="libs/modules/weixinapi/weixinapi.js" src-release="libs/modules/weixinapi/weixinapi.min.js"></script>
<!--modules_files_end-->
All the .d.ts files for api should be placed under src, that is, they need to be configured in package.json, and others should be placed under libs.
Other third-party libraries
In addition to using the standard third-party library provided by egret, we also provide another way that can be directly configured through index.html.
- Please put the code under the libs directory, but not under libs/modules.
- In the other_libs_files block in index.html, configure custom third-party libraries. Need to fill in egret=”lib” and src-release.
All files placed under the libs directory, the files with the extension ts can only be .d.ts(such as adts) files, and cannot have pure ts files (such as a.ts).