モジュール化された構成とサードパーティ製ライブラリの使用方法
5899 ワード
拡張モジュール
まず、モジュールを参照しないEgret空のアイテムを作成し、コマンドラインに入力します.
egret create demo --type empty
プロジェクトフォルダにegretPropertiesが表示されます.jsonファイル、このファイルは現在のプロジェクトのいくつかの情報を説明します.
ここには、拡張モジュールとサードパーティ製ライブラリを構成するために使用される
どのライブラリを使用する必要があるかは、どのライブラリを構成します.例えば
そしてコマンドラインに
標準サードパーティライブラリ
サードパーティ製ライブラリの準備
サードパーティ製ライブラリは標準的な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に必要なモジュール構造にコンパイルする必要があります.たとえばweixinapiというjsライブラリがあり、3つのファイルが含まれています.
ステップ1 egretサードパーティ製ライブラリのプロジェクトファイルを作成するには、コマンドラインに入力します.
cd .. (まずEgretプロジェクトから飛び出してからサードパーティライブラリプロジェクトを作成する)
サードパーティ製ライブラリプロジェクトとEgretプロジェクトはネストできません.Egretプロジェクトディレクトリの下にサードパーティ製ライブラリプロジェクトを作成しないでください.
作成したばかりのサードパーティ製ライブラリプロジェクトは、通常見ているEgretプロジェクトとは構造が異なり、2つの空のフォルダ
2ステップ目は、準備した3つのファイルをsrcフォルダにコピーします.
ステップ3他のサードパーティ製ライブラリのコードを参照する必要がある場合は、参照するライブラリファイル(主に.d.tsファイル)をlibsディレクトリの下に置き、libsの下に他のものを置かないでください.d.ts以外のその他.tsファイル.
ステップ4 packageを開きます.jsonは,3つのファイルをfilesの下に書き込むが,ファイルが前後に依存する順序がある場合は,順序に注意しなければならない.
ステップ5コマンドラインにコンパイルコマンドを入力
コンパイルが完了すると、binフォルダの下にweixinapiフォルダ(フォルダ名はpackage.jsonファイルの「name」:「weixinapi」で決定)が生成され、3つのファイルが含まれています.
サードパーティ製モジュールの使用
公式の拡張モジュールを使用する方法と同様に、
ここで注意しなければならないのは、weixinapiがEgretプロジェクトディレクトリの外に置く必要があることです.
最後のコマンドラインでは
apiに なものはすべてd.tsファイルは、srcの に いてください.packageが です.jsonに し、その はlibsの に いてください.
その のサードパーティ ライブラリ
egretが する なサードパーティ ライブラリを する に えて、indexを することもできます.htmlで する .
コードはlibsディレクトリの に いてくださいが、libs/modulesの に かないでください.
indexでhtmlのother_libs_filesブロックでは、カスタムサードパーティライブラリを します.egret="lib"およびsrc-releaseを する があります.
libsディレクトリの に かれているすべてのファイルは、tsを とするファイルは
まず、モジュールを参照しない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フォルダが1つしかありませんでしたが、game euiとtweenの3つのフォルダが増えています.これらは使用されているクラスライブラリです.同じように、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に必要なモジュール構造にコンパイルする必要があります.たとえば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 :
{
"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"
}
]
}
ステップ5コマンドラインにコンパイルコマンドを入力
egret build
libsrc(上記「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 :
{
"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"
"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ディレクトリの に いてくださいが、libs/modulesの に かないでください.
indexでhtmlのother_libs_filesブロックでは、カスタムサードパーティライブラリを します.egret="lib"およびsrc-releaseを する があります.
libsディレクトリの に かれているすべてのファイルは、tsを とするファイルは
.d.ts
(a.d.tsなど)ファイルのみであり、 なtsファイル(a.tsなど)は しません.