SDK for Web を JavaScript モジュール形式で公開してほしい

Cubism SDK 要望
1

現在配布されている live2dcubismcore.js は Live2DCubismCore というグローバルの名前空間に各種機能を公開していますが、ビルドを前提としたモダンなWeb開発環境とは相性が悪く使いづらいです。
JavaScript モジュール (MDN)に準拠した形式のものを公開してほしいです。

AS-IS

かつての jQuery のような、2000年代の古いライブラリはこれと同じ形式となっています。

// legacy/live2dcubismcore.js

var Live2DCubismCore;
(function (Live2DCubismCore) {
    var Moc = /** @class */ (function () {
        // ...
    }());
    Live2DCubismCore.Moc = Moc;
})(Live2DCubismCore || (Live2DCubismCore = {}));

// main-legacy.js
/// <reference path="./live2dcubismcore.d.ts" />

// <script> タグで先に `legacy/live2dcubismcore.js` を読み込むと
// グローバル変数 Live2DCubismCore が定義された状態となる。
const { Moc } = Live2DCubismCore;

<!-- ライブラリの読み込み -->
<script src="./legacy/live2dcubismcore.js"></script>
<script src="./main-legacy.js"></script>

TO-BE

npm で公開されている JavaScript ライブラリの多くはこれと同じような形式になっています。

// module/live2dcubismcore.js

class Moc {
  // ...
}

export { Moc };

// main.js
// ライブラリの読み込み
import { Moc } from './module/live2dcubismcore.js';

<!-- type="module" が付いていることに注意 -->
<script type="module" src="./main.js"></script>

<!-- Internet Explorer 向けに従来のコードへフォールバックすることも可能 -->
<script nomodule src="./legacy/live2dcubismcore.js"></script>
<script nomodule src="./main-legacy.js"></script>

メリット

  • モジュールバンドラに読み込んでツリーシェイキングが可能となる。
  • JavaScript のみでライブラリの読み込みが完結するため、 HTML から読み込む JavaScript ファイル の読み込み順を気にする必要が無くなる。
  • JavaScript モジュールは ES2015 で登場した機能であり、今後の JavaScript ライブラリの標準になることが見込まれる。

デメリット

  • Internet Explorer では動作しない。
    • Internet Explorer は 2022年6月16日付で Microsoft によるサポートが終了する予定となっています。
  • 従来形式と読み込みの互換性が無く、破壊的な変更となる。

実現方法(案)

主に TypeScript や Emscripten の設定を変更することで実現可能であると思われます。

参考として、ひとつのコードベースから従来形式とモジュール形式の2つを生成するサンプルリポジトリを作成しました。参考になる部分があれば幸いです。

2

要望のきっかけは Github Pages でホストする Vite を用いた SPA 開発で SDK を組み込めなかったことです。
どうも外部ライブラリの読み込みがモジュール形式を前提としているようで、現状の SDK では素直にビルドできませんでした。

live2dcubismcore.js と live2dcubismcore.d.ts の最後に export default Live2DCubismCore; と付け加えれば7割がた解決できるのですが、ソースコードは再配布が可能でも改変が禁止のためビルドステップに細工が必要となります。

この要望内容は時代の変化に合わせた順当な進化であり、モダンな開発環境を用いる開発者にとって使いやすくなるものと思います。
Live2D は素晴らしい技術でありより発展していってほしいと期待しています。今後の SDK 開発のヒントになれれば幸いです。

「いいね！」 1
3

@reosablo 様

いつも弊社製品をご愛顧くださり誠にありがとうございます。
Live2Dスタッフでございます。

この度は貴重なご要望を頂きまして、誠にありがとうございます。
具体的な活用の用途も含めて、
ユーザ様からの貴重なご意見として開発チームに共有いたしました。
今後の製品開発に役立ててまいります。

今後とも弊社製品をお引き立ての程宜しくお願いいたします。

「いいね！」 1