javascript를 type="param"으로 큐잉합니다.

javascript를 type="param"으로 큐잉합니다.

사용하고 싶다countUp.js워드프레스에서 제 커스텀 테마에 대해서요

파일을 추가할 때wp_enqueue_script()에러가 표시됩니다.

Uncaught SyntaxError: Unexpected token 'export'

제가 읽은 바로는 이 설정을<script>라벨, 그러나 그 방법은 모릅니다.그 옵션은, 에는 존재하지 않기 때문입니다.wp_enqueue_script()...

누구 나 도와줄 사람?

'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;
}

나는 Paul Naveda의 답변에 대해 구체적으로 말하고 싶다.네, 동작합니다만, 이 경우 기본적으로 인라인스크립트가 없어집니다.

즉, 기능을 사용할 때 기본적으로 제공하는 기능을 사용하여 현재 핸들 바로 앞 또는 뒤에 추가합니다.

wp-disc/class.wp-discloss.php:393 (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>';

전후 태그를 느슨하게 합니다.분실되지 않도록 하기 위해 (번역에만 사용되어야 함)을 사용하거나 다음 코드 행을 추가합니다.

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변수입니다만, 이 방법은,

이건 좀 더 복잡한 방법인데...하지만 나는 지연, 교차 기원 등을 추가하기 위해 다음을 사용했다.

아직 공식적이지는 않지만, 제가 읽은 바로는 나쁘지 않은 방법이라고 생각합니다(또한 여러 플러그인의 프로덕션에서 이 방법을 본 적이 있습니다).

따라서 (명백히 적합하도록 파라미터/패럴을 조정) 스크립트를 등록해야 합니다(Enqueue뿐만 아니라 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;
}

@Zeldri가 말한 것에 더 덧붙이자면,wp_localize_script()그 기능은 당초 의도했던 대로 번역용으로 유지할 수 있습니다.

아래는 다음 코드를 사용하여 추가한 코드를 잃어버리지 않으려면 필요한 코드입니다.wp_add_inline_script()

function make_scripts_modules( $tag, $handle, $src ) {
    
            if ( 'your-script-handle' !== $handle ) {
                return $tag;
            }
    
            $id = $handle . '-js';
    
            $parts = explode( '</script>', $tag ); // Break up our string
    
            foreach ( $parts as $key => $part ) {
                if ( false !== strpos( $part, $src ) ) { // Make sure we're only altering the tag for our module script.
                    $parts[ $key ] = '<script type="module" src="' . esc_url( $src ) . '" id="' . esc_attr( $id ) . '">';
                }
            }
    
            $tags = implode( '</script>', $parts ); // Bring everything back together
    
            return $tags;
}
add_filter('script_loader_tag', 'make_scripts_modules' , 10, 3);

그러면 필요한 스크립트가 모듈로 변환되고 인라인 스크립트는 그대로 유지됩니다.

@Paul Naveda, @peter 및 @zeldri에서 영감을 얻음

현지화 및 인라인스크립트를 포함하여 JS 모듈의 지원을 해제하는 작은 플러그인입니다.

---

wp-content/plugins/js-module-support-demo/js-module-support-demo의 내용.php

<?php
/*
Plugin Name: Javascript Module Support - Demo
Plugin URI: https://froger.me/
Description: Javascript Module Support - Demo
Version: 0.1
Author: Alexandre Froger
Author URI: https://froger.me/
*/

/* ---------------------------------------------------------------
 * Below is the main logic - it can be used in plugins or a theme
 * --------------------------------------------------------------- */

add_filter( 'script_loader_tag', 'add_type_attribute', 10, 3 );
function add_type_attribute( $tag, $handle, $src ) {
    $type = wp_scripts()->get_data( $handle, 'type' );

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

    return $tag;
}

/* ---------------------------------------------------------------------------------------
 * Below is the demo code - it adds the demo scripts (main, module, localization, inline)
 * --------------------------------------------------------------------------------------- */

add_action( 'wp_enqueue_scripts', 'demo_scripts', 10, 1 );
function demo_scripts() {
    $inline_script = '
        console.log(\'this is an inline script added to demo.js\');
    ';

    wp_enqueue_script( 'demo', plugin_dir_url( __FILE__ ) . 'js/demo.js', array(), false, true );
    wp_scripts()->add_data( 'demo', 'type', 'module' );
    wp_add_inline_script( 'demo', $inline_script );
    wp_localize_script( 'demo', 'LocalizationVar', array( 'key' => 'value' ) );
}

용용의 wp-content/plugins/js-module-support-demo/js/demo.js

import moduleVar from './module.js'

console.log(moduleVar);
console.log(window.LocalizationVar);

용용의 wp-content/plugins/js-module-support-demo/js/module.js

const moduleVar = 'This is a variable from module.js';

export default moduleVar;

---

완전한 데모 코드를 실행하면 콘솔에 다음과 같이 표시됩니다.

this is an inline script added to demo.js
This is a variable from module.js
{"key":"value"}

언급URL : https://stackoverflow.com/questions/58931144/enqueue-javascript-with-type-module