ページ変更ごとにdecorateCookedElement？

開発
5

あなたのコードは正常に動作するはずです。Discourse のバグに偶然遭遇しただけです。

loadScript() は、ロードするスクリプトに async 属性を設定しません。そのため、デフォルトで async="true" となり、ロード順序が狂ってしまいます。これはブラウザの仕様です。JS でロードされるスクリプトには、async="false" を強制する必要があります。

プラグインはサイズが小さいため、メインバンドルよりも速くロードされますが、async であるため、メインバンドルのロードと実行を待ってから実行するというロード順序が尊重されなくなります。

loadScript は、私の知る限り、コアのどこにもネストされていないため、おそらく見過ごされていました。通常、連携して動作する必要があるファイルはバンドルします。したがって、もう一つの質問にお答えすると、そのようなことを処理する Discourse の関数はありません。

もう一方のスニペットも機能するはずです。読みやすくするために、ネストせずにチェーン化することを試してみてはどうでしょうか。

// これはデコレーターの外側に記述します
const PLUGINS = {
  speed: "https://example.com/foo.js",
  skipBack: "https://example.com/bar.js",
  jumpForward: "https://example.com/baz.js"
};

// その後、デコレーター内で作業を行います
loadScript(MEDIA_ELEMENT_SRC)
  .then(() => loadScript(PLUGINS.speed))
  .then(() => loadScript(PLUGINS.skipBack))
  .then(() => loadScript(PLUGINS.jumpForward))
  .then(() => {
    audioplayers.forEach(function (el) {
      new MediaElementPlayer(el, MEDIA_ELEMENT_CONFIG);
    });
  });