JavaScript-Module in WordPress-Plugins nutzen

Module nichts nicht Neues in der JavaScript-Programmierung und es ist eine gute Praxis, den Code zu modularisieren.

WordPress bietet von Haus aus keine Möglichkeit an, Skripte als Modul zu laden. Es existiert ein Ticket von Mitte 2022, aber es hat noch nicht viel Beachtung gefunden. Deshalb ist bis dahin ein Workaround nötig, wenn man Module benutzen möchte.

Zum Glück bietet WordPress einen Filter namens “script_loader_tag” an. Damit hat man die Möglichkeit den <script>-String, den wp_enqueue-script erzeugt, zu manipulieren. Ohne weitere Umschweife, der Code:

add_filter('script_loader_tag', function ($tag, $handle, $src) {
  $tag = str_replace('<script ', '<script type="module" ', $tag);
  return $tag;”
});

• `$tag: <script>-Tag, das von wp_enqueue_script erzeugt wird
• $handle: Handle des Skripts
• $src: Die URL des Skripts

Der Filter nimmt den “<script “-Teil des Tags und fügt den notwendigen type=module Teil hinzu. Das ist alles.

Ein weiterer in diesem Zusammenhang interessanter Parameter ist $handle. Er erlaubt es, Skripte aus- oder einzuschließen. z.B.

add_filter('script_loader_tag', function ($tag, $handle, $src) {
   if ( 'NonModule.js' !== $handle ) {
      $tag = str_replace('<script ', '<script type="module" ', $tag);
   }”
   return $tag;
});