模組化配置和第三方庫的使用方法

首先我們建立乙個不引用任何模組的 egret 空專案，在命令列中輸入

egret create demo --type empty

您會看到在專案資料夾中有乙個egretproperties.json檔案，這個檔案描述了當前專案的一些資訊。

其中包含乙個modules字段,這部分就是用來配置擴充套件模組和第三方庫的。

為了統一管理，egret官方庫按照模組呈現，這樣設計的目的是避免載入不需要的模組，減少最終**的體積，提高載入速度。

目前 egret 的官方庫分為8個模組

egret 必備的核心庫 game 製作遊戲會用到的類庫，比如 movieclip，urlloader 等 res 資源載入庫，所有涉及資源載入的工作，都可以通過這個模組來完成 tween 動畫緩動類 dragonbones 龍骨動畫庫，用來製作一些複雜的動畫效果 socket 用來通訊的 websocket 庫 gui 老版本的 ui 庫 eui 新增的 ui 庫，使用起來更加的方便

您需要用哪個庫，就配置哪個。比如我想用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

準備第三方庫

由於 js 與 ts 在語法結構上的差異，在 ts 中不能直接呼叫 js 庫的 api，所以typescript 團隊提供了一套虛構宣告語法，可以把現有**的 api 用標頭檔案的形式描述出來，擴充套件名為 d.ts（d.ts 命名會提醒編譯器這種檔案不需要編譯）。這套虛構定義語法，讓你不需要去實現函式體裡的**，類似定義inte***ce和抽象類。

幸運的是目前，大多數流行的 js 類庫已經由官方提供，或者由熱心的社群開發者提供了對應的 d.ts 檔案。當然，如果沒有，您也可以自己編寫。這裡有篇教程講得很詳細，裡邊也包含乙個龐大的 d.ts 庫，以及管理這些庫的方法：使用js類庫。

另外，由於一些流行的 js 庫在快速更新，可能會有你找到的 d.ts 檔案定義與 js 庫的版本不一致而導致其中的 api 並沒有完全對應的問題。遇到這種情況，要麼尋找對應版本的 js 庫，要麼就需要您自己修改一下 d.ts 檔案了。

至於具體修改方法，在對照原 d.ts 的基礎上，你可能還需要熟悉 ts 介面方面的語法，可以參考這裡：ts介面教程。

建立第三方模組

當我們準備好了要用的第三方庫，還需要把它編譯成 egret 需要的模組結構。

比如現在有乙個名為 weixinapi 的 js 庫，它包含3個檔案

jweixin-1.0.0.js jweixin-1.0.0-additional.js weixinapi.d.ts

第 1 步要建立乙個egret第三方庫的專案檔案，在命令列中輸入

cd .. （首先跳出egret 專案）再建立第三方庫專案

egret create_lib libsrc

第三方庫專案與 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 下面，如果檔案有先後依賴順序，一定得注意順序。

package.json檔案中：
]}

第 5 步在命令列中輸入編譯命令

egret buildlibsrc（指的是上面「

egret create_lib libsrc

」中的

libsrc ）

編譯完成後，您會發現，在 bin 資料夾下，生成了乙個

weixinapi

資料夾（資料夾名字是由

package.json檔案中

"name": "weixinapi"決定的

），裡面有個3個檔案

weixinapi.d.ts 描述檔案 weixinapi.js 在 egret 專案裡，debug 模式時使用的 js 庫 weixinapi.min.js 在 egret 專案裡，發布後的正式版使用的 js 庫，經過壓縮，體積比 jszip.js 小

使用第三方模組

和使用官方的擴充套件模組方法類似，在modules裡填寫相關的資訊

egretproperties.json檔案中：
,  "publish": ,
"egret_version": "3.1.2",
"modules": [,,
,]
}

"name": "weixinapi" 第三方庫的名稱 "path": "../libsrc" 剛才我們建立的第三方庫的路徑，絕對路徑或者相對路徑

這裡需要注意的是，

weixinapi

需要放置在 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）。

模組化配置和第三方庫的使用方法

VS配置使用第三方庫

使用第三方模組ngx http accesskey

QT配置第三方庫

模組化配置和第三方庫的使用方法

VS配置使用第三方庫

使用第三方模組ngx http accesskey

QT配置第三方庫

相關推薦