TypeScript を使用して Angular に UnityLoader.js をインポートする必要があります。ただし、そのライブラリには ts 宣言がなく、機能するために構成変数 (配列) が必要です (以下を参照)。
デフォルトの実装:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | Test Unity</title>
<style>
/* a style sheet needs to be present for cursor hiding and custom cursors to work. */
</style>
</head>
<body>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="600px" width="960px"></canvas>
<script type='text/javascript'>
/* Configuration variable here !! */
var Module = {
TOTAL_MEMORY: 268435456,
errorhandler: null, // arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
compatibilitycheck: null,
dataUrl: "Development/ExportMiniDev.data",
codeUrl: "Development/ExportMiniDev.js",
memUrl: "Development/ExportMiniDev.mem",
};
</script>
/* Library call here !! */
<script src="Development/UnityLoader.js"></script>
</body>
</html>
すべてのドキュメントを読み、これに従って宣言ファイルを作成しました。
ここに私の宣言ファイル(index.d.ts):
// Type definitions for UnityLoader 5.4.3.f1
// Project: UnityLoader
// Definitions by: Alexandre Hagen <https://github.com/AlexandreHagen>
declare namespace UnityLoader {
interface Module {
TOTAL_MEMORY: number,
errorhandler?: boolean,
compatibilitycheck?: boolean,
dataUrl: string,
codeUrl: string,
memUrl: string
}
}
export {};
node_modules の私のフォルダー構造:
.
├── ...
├── unity-loader
│ ├── index.d.ts # Ts declaration file
│ ├── index.js # It is a remame of UnityLoader.js
│ └── package.js # Package to npm
└── ...
しかし、私はまだ一つのことを理解していません。私の宣言へのリンクを、npm パッケージではなく .js だけの lib にするにはどうすればよいですか? 実際、ドキュメントは npm パッケージのみのようです。
現在import unityLoader = require("unity-loader");
は動作していますが、UnityLoader.js のインポートがありません...使用できません。
では、Typescript で単純なグローバル ライブラリを使用するにはどうすればよいでしょうか? その問題は私にとって非常に重要ですここを参照してください お役に立てば幸いです!
Ps: Webpack を使用してアプリをビルドしています。