wordpress 将类型为“module”的javascript入队

c3frrgcw  于 2022-11-22  发布在  WordPress
关注(0)|答案(3)|浏览(150)

我想在Wordpress中对我的自定义主题使用countUp.js
当我使用wp_enqueue_script()添加文件时,出现错误:

Uncaught SyntaxError: Unexpected token 'export'

我已经读到它可以在<script>标签 type="module" 上固定设置,但我不知道如何做到这一点,因为该选项在wp_enqueue_script()中不存在...
有人能帮我吗?

utugiqy6

utugiqy61#

可以通过应用过滤器“script_loader_tag”向脚本添加属性。
使用add_filter('script_loader_tag', 'add_type_attribute' , 10, 3);添加过滤器。
定义回调函数,类似于上面链接中给出的示例:

function add_type_attribute($tag, $handle, $src) {
    // if not your script, do nothing and return original $tag
    if ( 'your-script-handle' !== $handle ) {
        return $tag;
    }
    // change the script tag by adding type="module" and return it.
    $tag = '<script type="module" src="' . esc_url( $src ) . '"></script>';
    return $tag;
}
h43kikqp

h43kikqp2#

我想对Paul Naveda的回答做一个具体的说明。是的,它是有效的,但是这样你基本上会失去任何额外的内联脚本。
我的意思是,当使用wp_add_inline_script()函数时,它基本上接受你给它的东西,或者在当前的句柄之前或之后添加它:
(github)开发者可以在一个文件夹中创建一个脚本。

$tag  = $translations . $cond_before . $before_handle;
$tag .= sprintf( "<script%s src='%s' id='%s-js'></script>\n", $this->type_attr, $src, esc_attr( $handle ) );
$tag .= $after_handle . $cond_after;
$tag = apply_filters( 'script_loader_tag', $tag, $handle, $src );

因此通过执行以下操作:

$tag = '<script type="module" src="' . esc_url( $src ) . '"></script>';

您丢失了before和after标记,为了确保不会丢失它,可以使用wp_localize_script()(它应该只用于翻译),或者添加以下代码行:

function add_type_attribute($tag, $handle, $src) {
    if ('your_handle_here' === $handle) {
        /** @var WP_Scripts $wp_scripts */
        global $wp_scripts;
        $before_handle = $wp_scripts->print_inline_script( $handle, 'before', false );
        $after_handle  = $wp_scripts->print_inline_script( $handle, 'after', false );
        if ( $before_handle ) {
            $before_handle = sprintf( "<script type='text/javascript' id='%s-js-before'>\n%s\n</script>\n", esc_attr( $handle ), $before_handle );
        }
        if ( $after_handle ) {
            $after_handle = sprintf( "<script type='text/javascript' id='%s-js-after'>\n%s\n</script>\n", esc_attr( $handle ), $after_handle );
        }
        $tag = $before_handle;
        $tag .= sprintf( "<script type='module' src='%s' id='%s-js'></script>\n", $src, esc_attr( $handle ));
        $tag .= $after_handle;
    }
    return $tag;
}
add_filter('script_loader_tag', 'add_type_attribute' , 10, 3);

它保留之前和之后的内容,如果存在,则打印该内容
请记住,由于$translations变量的原因,这仍然不是完美的,但如果使用wp_add_inline_script(),这是另一种方法

roejwanj

roejwanj3#

这是一个有点复杂的方式去...但我已经使用以下添加延迟,交叉源等...
我不认为这是官方的,但从我所读到的,这不是一个坏的方式来做它(我已经看到这种方法在生产的几个插件)。
因此,(调整参数/变量以明显适合)需要脚本注册(而不仅仅是入队)(请参见https://developer.wordpress.org/reference/functions/wp_script_add_data/):

wp_register_script('countup-js', 'https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.0/countUp.min.js', ['jquery'], $js_version, true);
wp_enqueue_script('countup-js');

wp_scripts()->add_data('countup-js', 'type', 'module');

然后是过滤器(就像上面的答案一样,但我认为这概述了如何将其设置为更可重用、更灵活等)

add_filter('script_loader_tag', 'moduleTypeScripts', 10, 2);
function moduleTypeScripts($tag, $handle)
{
    $tyype = wp_scripts()->get_data($handle, 'type');

    if ($tyype) {
        $tag = str_replace('src', 'type="' . esc_attr($tyype) . '" src', $tag);
    }

    return $tag;
}

相关问题