在WordPress中使用ES模块时如何安全传递Admin AJAX URL至前端JavaScript

我太懂你这种纠结了——刚把ES模块在WordPress里跑通，结果发现原来用wp_localize_script传递AJAX URL的老办法直接失效，硬编码又怕后期维护出问题对吧？别慌，你已经找对方向了，官方确实推荐用wp_add_inline_script()来替代，下面我给你把具体的实现细节和注意事项理清楚。

核心解决方案：用wp_add_inline_script()注入全局变量 #

因为wp_localize_script并不支持模块类型的脚本（官方文档明确指出这一点），所以我们可以通过wp_add_inline_script()把AJAX URL注入到全局作用域里，让ES模块能安全访问到它。

优化你的PHP代码 #

先看调整后的函数，我帮你简化了is_single的判断，同时确保注入的代码在模块加载前执行：

function addScript(){
    // 简化单页判断，用数组更清晰
    if(is_single([11084, 10952, 18184, 18239, 18510])){
        // 加载主ES模块
        wp_enqueue_script_module('modTest', get_stylesheet_directory_uri() . '/bsd-js.js');
        
        // 注入AJAX URL到window全局对象，before参数确保代码在模块前执行
        wp_add_inline_script(
            'modTest',
            'window.my_ajax_object = ' . json_encode([
                'ajax_url' => admin_url('admin-ajax.php')
            ]),
            'before'
        );
        
        // 加载第二个测试模块
        wp_enqueue_script_module('modTest2', get_stylesheet_directory_uri() . '/Modules/testMod.js');
    }
}
add_action('wp_enqueue_scripts', 'addScript');

在ES模块中访问AJAX URL #

因为我们把变量挂在了window全局对象上，模块里可以直接通过window来访问，完全不影响ES模块的作用域规则：

// 在你的bsd-js.js模块里
console.log(window.my_ajax_object.ajax_url); // 输出正确的Admin AJAX地址

// 发起AJAX请求的示例
fetch(window.my_ajax_object.ajax_url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
        action: 'your_custom_ajax_action', // 对应你PHP里的wp_ajax_*钩子
        // 其他需要传递的参数...
    })
})
.then(response => response.json())
.then(data => {
    // 处理返回的数据
    console.log('AJAX响应:', data);
})
.catch(error => console.error('AJAX请求出错:', error));

关键注意事项 #

• 一定要用before参数：这个参数保证注入的变量定义代码在模块脚本之前执行，这样模块加载时变量已经存在，不会出现未定义的错误。
• 不要混用wp_localize_script和wp_enqueue_script_module：官方明确说明这两个函数不兼容，强行搭配会导致变量无法正确注入。
• 全局变量是最简便的方案：如果你追求更纯粹的模块化，可以专门写一个config.js模块，用wp_add_inline_script注入该模块的内容，但对于大多数场景，全局变量已经足够安全且易维护。

这样既保留了ES模块的模块化优势，又安全地传递了动态生成的Admin AJAX URL，完全不用硬编码啦。

内容来源于stack exchange