如何在WordPress中动态入队React构建后文件名变化的JS/CSS脚本

我太懂这种烦恼了——React的哈希命名虽然能完美解决浏览器缓存问题，但每次构建完都要手动去functions.php里改文件名，真的很繁琐。既然你已经尝试过scandir()，那我们可以把这个思路完善一下，让PHP自动精准定位到构建后的资源文件，彻底告别手动修改。

下面是两种实用的解决方案，你可以根据自己的情况选择：

方案一：基于scandir的精准过滤 #

这个方法适合想手动控制过滤逻辑的场景，比如排除sourcemap文件（.map）：

首先，创建两个辅助函数分别获取JS和CSS文件：

// 获取React构建后的JS文件名（排除map文件）
function get_react_js_file($dir) {
    $files = scandir($dir);
    // 过滤出.js文件，同时排除.map文件
    $valid_js = array_filter($files, function($file) {
        return str_ends_with($file, '.js') && !str_ends_with($file, '.map.js');
    });
    // 返回第一个符合条件的文件（React构建默认只有一个主JS文件）
    return reset($valid_js);
}

// 获取React构建后的CSS文件名（排除map文件）
function get_react_css_file($dir) {
    $files = scandir($dir);
    $valid_css = array_filter($files, function($file) {
        return str_ends_with($file, '.css') && !str_ends_with($file, '.map.css');
    });
    return reset($valid_css);
}

然后在资源入队的函数里调用这两个方法：

function enqueue_react_app_assets() {
    // 替换成你React构建文件存放的目录路径
    $react_js_dir = get_template_directory_uri() . '/react-build/static/js/';
    $react_css_dir = get_template_directory_uri() . '/react-build/static/css/';
    
    // 注意：这里要用服务器本地路径（get_template_directory）给scandir，而不是URI
    $js_file = get_react_js_file(get_template_directory() . '/react-build/static/js/');
    $css_file = get_react_css_file(get_template_directory() . '/react-build/static/css/');
    
    // 入队JS文件
    if ($js_file) {
        // 用文件修改时间作为版本号，自动刷新浏览器缓存
        $js_local_path = get_template_directory() . '/react-build/static/js/' . $js_file;
        wp_enqueue_script('react-app', $react_js_dir . $js_file, array(), filemtime($js_local_path), true);
    }
    
    // 入队CSS文件
    if ($css_file) {
        $css_local_path = get_template_directory() . '/react-build/static/css/' . $css_file;
        wp_enqueue_style('react-app', $react_css_dir . $css_file, array(), filemtime($css_local_path));
    }
}
add_action('wp_enqueue_scripts', 'enqueue_react_app_assets');

方案二：用glob简化匹配 #

如果你觉得scandir的过滤有点麻烦，可以用glob()直接匹配指定扩展名的文件，代码会更简洁：

function get_react_build_asset($dir, $extension) {
    // 匹配所有带指定扩展名的文件，排除map文件
    $files = glob("{$dir}*.{$extension}");
    $valid_files = array_filter($files, function($file) {
        return strpos($file, '.map') === false;
    });
    
    if (!empty($valid_files)) {
        // 返回文件名（而非完整路径）
        return basename(reset($valid_files));
    }
    return false;
}

// 资源入队逻辑
function enqueue_react_app_assets() {
    $js_dir_uri = get_template_directory_uri() . '/react-build/static/js/';
    $css_dir_uri = get_template_directory_uri() . '/react-build/static/css/';
    
    $js_dir_local = get_template_directory() . '/react-build/static/js/';
    $css_dir_local = get_template_directory() . '/react-build/static/css/';
    
    $js_file = get_react_build_asset($js_dir_local, 'js');
    $css_file = get_react_build_asset($css_dir_local, 'css');
    
    if ($js_file) {
        wp_enqueue_script('react-app', $js_dir_uri . $js_file, array(), filemtime($js_dir_local . $js_file), true);
    }
    if ($css_file) {
        wp_enqueue_style('react-app', $css_dir_uri . $css_file, array(), filemtime($css_dir_local . $css_file));
    }
}
add_action('wp_enqueue_scripts', 'enqueue_react_app_assets');

注意事项 #

• 路径正确性：确保你替换的目录路径和实际存放React构建文件的位置一致，本地路径（get_template_directory()）用于扫描文件，URI路径（get_template_directory_uri()）用于前端加载资源。
• 多文件场景：如果你的React应用做了代码分割，生成多个JS/CSS文件，可以调整函数逻辑，比如遍历所有符合条件的文件并逐一入队。
• 缓存优化：代码里用filemtime()获取文件修改时间作为版本号，这样每次构建后，WordPress会自动给资源URL添加新的版本参数，避免浏览器缓存旧资源。

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