吾知网

标题: egret模块化配置和第三方库的使用方法 [打印本页]

作者: jekeyhui99    时间: 2018-3-7 15:31
标题: egret模块化配置和第三方库的使用方法
Egret 引擎更新到2.5版本后,我们重新构建了引擎,把以前的一些非核心内容(比如 MovieClip)都移到了扩展模块中,这样大大的减小了核心库的包体大小。同时也修改了扩展模块和第三方库的配置方法,使用起来更加便捷。下面就详细说明一下使用方法。
Egret 2.5 之前版本的方法请参考:旧版集成第三方库说明
扩展模块
首先我们创建一个不引用任何模块的 Egret 空项目,在命令行中输入
egret create demo --type empty
您会看到在项目文件夹中有一个 egretProperties.json 文件,这个文件描述了当前项目的一些信息。
其中包含一个 modules 字段,这部分就是用来配置扩展模块和第三方库的。
为了统一管理,Egret官方库按照模块呈现,这样设计的目的是避免加载不需要的模块,减少最终代码的体积,提高加载速度。
目前 Egret 的官方库分为8个模块
您需要用哪个库,就配置哪个。比如我想用 game tween eui这3个模块,只要像下面这样添加到配置文件里就可以了
然后命令行里使用 egret build -e命令,引擎会自动把使用到的类库放到你的项目里。
你会发现,在项目的 libs/modules 文件夹下,原来只有一个 egret 文件夹,现在多了game eui 和tween三个文件夹,这些就是使用到的类库。
同样的,如果您在 egretProperties.json 配置文件里把模块名删掉,libs/modules 文件夹下也会删掉对应的类库。
使用egret create project_name命令创建的项目,默认会带4个官方模块:egret game res tween
标准第三方库准备第三方库
第三方库可以是标准的 ts 库,也可是你在网上下载现成的 js 库,或者是自己写的 js 库。
由于 js 与 ts 在语法结构上的差异,在 ts 中不能直接调用 js 库的 API,所以TypeScript 团队提供了一套虚构声明语法,可以把现有代码的 API 用头文件的形式描述出来,扩展名为 d.ts(d.ts 命名会提醒编译器这种文件不需要编译)。这套虚构定义语法,让你不需要去实现函数体里的代码,类似定义interface和抽象类。
幸运的是目前,大多数流行的 js 类库已经由官方提供,或者由热心的社区开发者提供了对应的 d.ts 文件。当然,如果没有,您也可以自己编写。这里有篇教程讲得很详细,里边也包含一个庞大的 d.ts 库,以及管理这些库的方法:使用JS类库
另外,由于一些流行的 js 库在快速更新,可能会有你找到的 d.ts 文件定义与 js 库的版本不一致而导致其中的 API 并没有完全对应的问题。遇到这种情况,要么寻找对应版本的 js 库,要么就需要您自己修改一下 d.ts 文件了。
至于具体修改方法,在对照原 d.ts 的基础上,你可能还需要熟悉 ts 接口方面的语法,可以参考这里:ts接口教程
创建第三方模块
当我们准备好了要用的第三方库,还需要把它编译成 egret 需要的模块结构。
比如现在有一个名为 jszip 的 js 库,它包含3个文件
第 1 步 要创建一个egret第三方库的项目文件,在命令行中输入
egret create_lib jszip
第三方库项目与 Egret 项目不能嵌套。请不要在Egret 项目目录下面创建第三方库项目。
您会发现刚刚创建的第三方库项目和我们平时看到的 Egret 项目结构是不同的,里面包含2个空文件夹 bin、src、libs(如果没有请自行加上),还有一个 package.json 的配置文件。
第 2 步 把准备好的那3个文件拷贝到src文件夹中。
第 3 步 如果需要引用到其他的第三方库的代码,请把引用到的库文件(主要是 .d.ts 文件)放到 libs 目录下,libs 下不要放其他除了 .d.ts 外的其他 .ts 文件。
第 4 步 打开 package.json,将3个文件写入到 files 下面,如果文件有先后依赖顺序,一定得注意顺序。
第 5 步 在命令行中输入编译命令
egret build jszip
编译完成后,您会发现,在 bin 文件夹下,生成了一个 jszip 文件夹,里面有个3个文件
使用第三方模块
和使用官方的扩展模块方法类似,在modules里填写相关的信息
这里需要注意的是,jszip 需要放置在 Egret 项目目录的外面。
最后命令行里使用 egret build -e 命令,引擎会把自定义的第三方库引用进来,在 libs/modules 路径下,你会看到 jszip 这个库,并且在 index.html 中的 modules_files 块中,会加入 jszip 的 script 标签。
所有需要对 api 的 .d.ts 文件,请放在 src 下面,即需要在 package.json 里配置,其他的请放在 libs 下面。
其他第三方库
除了使用 egret 提供的标准的第三方库的方式,我们还提供了另外一种可以通过 index.html 来直接配置的方式。
所有放在 libs 目录下面的文件,以 ts 作为扩展名的文件只能是 .d.ts(如 a.d.ts)文件,不能有纯 ts 文件(如 a.ts)。
http://edn.egret.com/cn/docs/page/172


作者: jekeyhui99    时间: 2018-3-7 15:32
如何生成 .d.ts
一直以来,有不少开发者对于如何写自己的 “.d.ts” 而苦恼。下面我们将介绍下如何生成自己的js的头文件 “.d.ts” 。
前提
本教程只介绍如何通过已知的 js 相关 api 来生成 “.d.ts” 文件,如果你还不知道 js api 怎么调用,那么请到下载 js 的地方去查看相关文档。这里不会告诉你 js 文件里有哪些方法或者变量,也不会帮助你通过 js 文件来自动生成 “.d.ts” 文件。
说明写法
下面我们介绍下 “.d.ts” 的几种声明的写法。
模块 module
或者
类 class接口 interface
接口和类的区别是,接口是不可以 new 出来的。class 和 interface 只能包含函数和变量,不能再有 module、class、interface。
函数
函数体内不能再声明其他,其实也很明显,没有地方可以嵌套。
变量
和函数体一样,不可以嵌套。
特殊变量
为什么要把这个单独拿出来,因为这个其实和普通的变量不太一样,它的声明类似 class 和 interface,如果是在纯 ts(非”.d.ts”)中写的话,它是和 interface 一样,不会生成到最终的 js 文件中去。
写法
调用
特殊变量中不能嵌套 module、class、interface。
示例
下面我们将以之前一位开发者提问的关于 talkingData 的一个 api 如何写对应的 .d.ts 文件来讲解。
代码分析
最后在 .d.ts 中的写法如下
更多TypeScript教程请访问:






欢迎光临 吾知网 (http://5g99.com/bbs/) Powered by Discuz! X3.2