白鹭 创建和使用第三方扩展 TS & JS

2018-12-08  本文已影响73人  Zszen

注意

第三方库要放到项目根目录外的同级目录或其他位置

第三方库项目与 Egret 项目不能嵌套。请不要在Egret 项目目录下面创建第三方库项目

创建第三方插件 typescript

创建DemoPlugin插件 (记住不要放到根目录,创建后移走)
egret create_lib demots
创建两个目录
mkdir ./demots/bin(可以不手动创建,执行编译时会自动创建)
mkdir ./demots/src
将你写的ts类放到src中,这里我放了一个最简单的代码

class DemoTS {
    public constructor() {
    }
    public output(){
        console.log("I'm Demo TS");
    }
}

编译插件
egret build demots

这里的tsconfig.json不需要更改

{
    "compilerOptions": {
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "declaration": true,
        "outFile": "bin/demots.js"
    },
    "include": [
        "src"
    ]
}

然后在bin下会生成三个文件,分别是ts接口文件,js文件(ts类转换后),js最小化文件

创建第三方插件 javascript

egret create_lib demojs
创建两个目录
mkdir ./demojs/bin(可以不手动创建,执行编译时会自动创建)
mkdir ./demojs/src
mkdir ./demojs/typings
将js类放到src中,将对应的ts接口放到typings中
修改tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "declaration": false,
        "outFile": "bin/demots.js",
        "allowJs": true
    },
    "include": [
        "src"
    ]
}

修改package.json, 增加指向typings

{
    "name": "demojs",
    "compilerVersion": "5.2.12",
    "typings":"typings/DemoJs.d.ts"
}

这里增加了allowJs来支持js,我猜想这个参数是不对src下的类文件进行js转换,declaration设置为了false,也就是不通过src中的类产生ts接口,而是靠手动了来处理这个类

原理上来讲,制作插件无非就是把ts的插件自动转换成js插件,并自动生成接口,节省项目编译速度(可以参考)。或者把js类手动增加ts接口

配置

修改项目下的配置文件egretProperties.json (先备份好,别改坏了)
在插件部分增加两个上面建的插件

{
    "name": "demojs",
    "path": "../plugin/demojs"
},
{
    "name": "demots",
    "path": "../plugin/demots"
},

编译

无论添加官方扩展还是第三方扩展,都要执行一下编译
此代码要在项目根目录下编译,这样module下会增加这个插件,lib/module下的文件不是手动放置的
egret build
如果不好用,增加个参数-e
egret build -e

开发使用

在项目中任何类中可以使用

let ts = new DemoTS();
ts.output();

let js = new DemoJs();
js.output();

结果

I'm Demo TS
hello js

上一篇 下一篇

猜你喜欢

热点阅读