JavaScriptホットリロードを1.3.0で

Wonderland Engine 1.3.0リリースにより、エディター内でJavaScript/TypeScriptアプリケーションをバンドルする新しい方法が導入されました。

新しいセットアップでは、エンジンとVRセッションをリスタートせずにブラウザーでJavaScriptをリロードできるホットリロードサポートが復活します。

1.3.0以前

以前は、エディターは単一のエントリーポイント（index.js）から単一のJavaScriptバンドルを生成していました。

js/index.js

import {loadRuntime} from '@wonderlandengine/api';

/* wle:auto-imports:start */
import {MyComponent} from './js/my-component.js';
/* wle:auto-imports:end */

const engine = await loadRuntime(...);

/* wle:auto-register:start */
engine.registerComponent(MyComponent);
/* wle:auto-register:end */

生成されたバンドルにはインポートした依存関係、エンジンのインスタンス化コード、グローバル変数が含まれていました。

新しいアーキテクチャ

新しいアーキテクチャでは、アプリケーションエントリーとコンポーネントの登録を分離します：

js/index.js: コンポーネントの登録を含む
app.js: エンジンの作成、グローバル変数などを含む

js/index.js

// コンポーネントのエントリーポイント

/* wle:auto-imports:start */
import {MyComponent} from './js/my-component.js';
/* wle:auto-imports:end */

export default function(engine) {
  /* wle:auto-register:start */
  engine.registerComponent(MyComponent);
  /* wle:auto-register:end */
}

app.js

// アプリケーションのエントリーポイント

import {loadRuntime} from '@wonderlandengine/api';

const engine = await loadRuntime(...);
engine.loadMainScene('MyScene.bin');

さらに、コンポーネントバンドルはengine.loadMainScene()の呼び出しによって自動的にダウンロードおよび登録されます。

コンポーネントを手動でインポートしてアプリケーションに登録することは可能ですが、共通の問題を避けるためにまず注意点セクションを参照してください。

設定

エディターにはかつてJavaScript設定用の単一のエントリーがありました：

現在はアプリケーションとコンポーネントエントリーで複製されています：

output設定は、展開フォルダ内のバンドルファイル名を参照するために使用されます。

カスタムnpmコマンドを使用する場合、この値は生成されたファイルのファイル名に設定する必要があります。

移行

1.3.0以前のプロジェクトを開くと、移行プロセスによってコンポーネントバンドルが無効になり、元のインデックスにインポートリストが残されます。

移行は以下のステップに従って行います：

Project Settingsでコンポーネントバンドルを有効にする
コンポーネントのインポート/登録を新しいインデックスファイルに移動する

コンポーネントバンドルを有効にする

Project Settingsで：

未チェックの場合はShow Advanced Settingsチェックボックスをオンにする
bundlingオプションを設定。esbuildの使用を推奨します
entryPointをjs/component-index.jsに設定
outputをMyWonderland-components.jsに設定

パッキングによりjs/component-index.jsが自動的に生成されます：

/* wle:auto-imports:start */
/* wle:auto-imports:end */

export default function(engine) {
/* wle:auto-register:start */
/* wle:auto-register:end */
}

コンポーネントを移動する

あなたのプロジェクトで旧js/index.jsファイルにコンポーネントを手動でインポート/登録していた場合、それらをjs/component-index.jsのエントリーポイントに移動する必要があります：

js/index.js

import {loadRuntime} from '@wonderlandengine/api';

/* wle:auto-imports:start */
/* wle:auto-imports:end */

// この行はコンポーネントバンドルに移動する必要があります
import {ManualComponent} from './js/manual-component.js';

const engine = await loadRuntime(...);

/* wle:auto-register:start */
/* wle:auto-register:end */

// この行はコンポーネントバンドルに移動する必要があります
engine.registerComponent(ManualComponent);

js/component-index.js

/* wle:auto-imports:start */
/* wle:auto-imports:end */

import {ManualComponent} from './manual-component.js';

export default function(engine) {
    /* wle:auto-register:start */
    /* wle:auto-register:end */
    engine.registerComponent(ManualComponent);
}

おめでとうございます、新しいアーキテクチャを使用しています！

注意点

グローバル変数を持つアプリケーションでは、以下のようなケースが発生する可能性があります：

js/manager.js

export class Manager {
    static isReady = false;
}

app.js

import {loadRuntime} from '@wonderlandengine/api';
import {Manager} from './js/manager.js';

const engine = await loadRuntime(...);
Manager.isReady = true;
engine.loadMainScene('MyScene.bin');

js/my-component.js

import {Manager} from './manager.js';

export class MyComponent extends Component {
    start() {
        console.log(Manager.isReady); // `false`
    }
}

この例では、Managerクラスが各ファイルで一度だけ宣言されます。

アプリケーションのアーキテクチャを決定する方法は、各使用ケースによって異なります。以下は潜在的な移行ステップのリストです：

マネージャーはコンポーネントバンドル側に完全に移動することができます
グローバル変数は遅延初期化されることができます
データはwindowを使用して共有されることができます（あまり推奨されません）
上級者向け: HTMLでインポートされた別のjsバンドルを使用することができます

Last Update: February 5, 2025