Egret 4.1引擎以上第三方库文件制作、导入以及使用（一）

发表于

Egret 引入puremvc

现在的TS开发大多启用puremvc框架，那么在Egret项目里想要引入puremvc就需要自己手动导入。导入的时候发现，官方文档上的说明早就不适合当前最新5.0的引擎，于是自己翻阅文档，研究了一下。

准备库文件：

首先，下载puremvc js库文件 puremvc.js和声明文件puremvc.d.ts。点我下载
得到文件后 重命名下成puremvc.js和puremvc.d.ts。

制作第三方模块：

得到两个文件后，去你的游戏项目外，cmd下输入 egret create_lib puremvc 来创建第三方库文件。
第三方库项目与 Egret 项目不能嵌套。请不要在Egret 项目目录下面创建第三方库项目。
输入后你会得到两个json文件，如下

1
2
3
4
|-- xxxxx //你的项目主文件
|-- puremvc //创建的第三方库文件
    |-- tsconfig.json
    |-- package.json

  • 自己要另建两个文件夹bin src
1
2
3
4
5
6
|-- xxxxx //你的项目主文件
|-- puremvc //创建的第三方库文件
    |-- bin
    |-- src
    |-- tsconfig.json
    |-- package.json
  • 删除 package.json中的 modoules 字段
  • 修改 tsconfig.json文件，根据 TypeScript / JavaScript 不同类型的类库，进行不同的项目配置：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// JavaScript 类库
{
    "compilerOptions": {
        "target": "es5",
        "outFile": "bin/libtest1/libtest.js",
        "allowJs": true
    },
    "files": [
        "src/a.js",
    ]
}
// TypeScript 类库
{
    "compilerOptions": {
        "target": "es5",
        "outFile": "bin/libtest1/libtest.js",
        "declaration": true
    },
    "files": [
        "src/a.ts",
    ]
}

  • 因为我们使用的是javascript类库puremvc.js，所以我们应该这样写

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // JavaScript 类库
    {
    	"compilerOptions": {
    		"target": "es5",
    		"noImplicitAny": false,
    		"sourceMap": false,
    		"outFile": "bin/puremvc.js",
    		"allowJs": true
    	},
    	"include": [
    		"src"
    	],
    	"files": [
    			"src/puremvc.js"
    	]
    }

  • 如果项目是 JavaScript 类库，需要在 package.json中配置一个 typings字段，并设置为一个自定义的 .d.ts 文件
    package.json配置如下：

    1
    2
    3
    4
    {
        "name": "puremvc",
        "typings": "typings/puremvc.d.ts"
    }

  • 我们把puremvc.d.ts声明文件放在这里就行了

    1
    2
    3
    4
    5
    6
    7
    8
    |-- xxxxx //你的项目主文件
    |-- puremvc //创建的第三方库文件
        |-- bin
        |-- src
        |-- typings
                |-- puremvc.d.ts
        |-- tsconfig.json
        |-- package.json

  • 完成上述操作后，执行 egret build，会根据 tsconfig.json中的 outFile字段生成库文件，压缩文件以及 .d.ts

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    |-- xxxxx //你的项目主文件
    |-- puremvc //创建的第三方库文件
        |-- bin //生成文件
                |-- puremvc.d.ts
                |-- puremvc.js
                |-- puremvc.min.ts
        |-- src
        |-- typings
                |-- puremvc.d.ts
        |-- tsconfig.json
        |-- package.json

使用第三方模块：

大功告成，现在再去项目主目录下的egretProperties.json中 module字段下添加

1
2
3
4
5
6
7
"modules": [
  //...省略其他模块
  {
    "name": "puremvc",
    "path": "../puremvc"
  }
]

最后运行下egret build -e ，引擎会把自定义的第三方库引用进来。
这样，在这个项目代码中就可以使用puremvc框架了，如何启动请见下一篇。