如何在WordPress中正确入队模块脚本？

你当前的代码无法加载脚本的核心原因是：@google/model-viewer属于ES模块，而WordPress默认通过wp_enqueue_script加载的脚本类型为text/javascript，不支持模块格式。

正确的实现方式 #

有两种可行方案，根据你的WordPress版本选择：

方案1：适配所有支持模块的WordPress版本（推荐）

先入队脚本，再通过wp_script_add_data指定脚本类型为模块：

function enqueue_model_viewer() {
    wp_enqueue_script( 
        'model-viewer', 
        'https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js', 
        array(), 
        '1.0.0', 
        false 
    );
    wp_script_add_data( 'model-viewer', 'type', 'module' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_model_viewer' );

方案2：仅适用于WordPress 5.7及以上版本

直接在wp_enqueue_script的参数中传入类型配置：

function enqueue_model_viewer() {
    wp_enqueue_script( 
        'model-viewer', 
        'https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js', 
        array(), 
        '1.0.0', 
        array( 'type' => 'module' )
    );
}
add_action( 'wp_enqueue_scripts', 'enqueue_model_viewer' );

额外注意事项 #

• 确保你的代码挂载到wp_enqueue_scripts钩子上，这是WordPress前端加载脚本的标准钩子。
• 若加载后仍无效果，清空浏览器缓存再测试，避免旧缓存干扰。
• 旧版本WordPress（低于5.7）对模块脚本支持有限，建议升级到最新稳定版。

内容的提问来源于stack exchange，提问作者user12974774