WordPress 中的 Hotwire Turbo

Question

我希望在我的 WP 应用程序中使用 Hotwire Turbo。

我像这样包括它：

wp_enqueue_script('Turbo', 'https://unpkg.com/@hotwired/[email protected]/dist/turbo.es2017-esm.js', array(), '7.3.0', false);

上面的行位于下面调用的函数内：

add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

并确保将其视为一个模块：

function set_scripts_type_attribute( $tag, $handle, $src ) {
    if ( 'Turbo' === $handle ) {
        $tag = '<script type="module" src="'. $src .'"></script>';
    }
    return $tag;
}

但我收到此错误：

application.js:29 Uncaught ReferenceError: Turbo 未定义 在 application.js:29:1

有人知道如何解决这个问题吗？

谢谢

add_filter( 'script_loader_tag', 'set_scripts_type_attribute', 10, 3 );

Answer 1

似乎您没有为脚本设置任何依赖项。这意味着脚本将无法找到它需要的其他 JavaScript 文件。

要修复此错误，您需要将以下依赖项添加到

wp_enqueue_script()

调用中：

wp_enqueue_script('Turbo', 'https://unpkg.com/@hotwired/[email protected]/dist/turbo.es2017-esm.js', array('jquery'), '7.3.0', false)

；

Turbo 脚本需要 jquery 依赖项。添加此依赖项后，错误就会消失。

以下是在 WordPress 中加载 Turbo 脚本所需的完整代码：

function enqueue_scripts() {
    wp_enqueue_script('Turbo', 'https://unpkg.com/@hotwired/[email protected]/dist/turbo.es2017-esm.js', array('jquery'), '7.3.0', false);
}

add_action('wp_enqueue_scripts', 'enqueue_scripts');