Express Handlebars 全局匹配组件作为Partial加载失败求助

我之前也踩过这个坑！express-handlebars的partialsDir配置确实支持glob模式，但得调整写法才能让它正确遍历components的子目录。按下面的步骤来改应该就能解决：

1. 确保依赖版本正确 #

旧版的express-handlebars对glob的支持不够完善，先升级到最新版：

npm install express-handlebars@latest

2. 修正partialsDir的配置 #

你原来写的./src/components/**/是匹配目录，但我们需要匹配到具体的.hbs文件。改成下面的写法，用glob模式精准定位所有子目录里的Partial文件：

const express = require('express');
const { engine } = require('express-handlebars');

const app = express();

app.engine('.hbs', engine({
  extname: '.hbs',
  defaultLayout: 'index',
  layoutsDir: './src/pages',
  // 匹配components下所有层级子目录里的.hbs文件
  partialsDir: './src/components/**/*.hbs'
  // 或者用数组同时指定多个路径（如果需要的话）
  // partialsDir: [
  //   './src/components/**/*.hbs',
  //   './src/other-partials/**/*.hbs'
  // ]
}));

app.set('view engine', '.hbs');

3. 模板里正确引用Partial #

假设你的目录结构是src/components/hero/hero.hbs，那在模板里引用的时候要带上子目录路径：

{{> hero/hero}}

如果你的Partial文件名和所在目录名一致，有些新版的express-handlebars也支持简写{{> hero}}，但为了兼容性，建议用完整路径。

4. 验证Partial是否加载成功 #

如果还是有问题，可以打印出已加载的Partial列表，确认引擎是否正确识别了文件：

const hbsEngine = engine({
  // 你的配置项
  extname: '.hbs',
  defaultLayout: 'index',
  layoutsDir: './src/pages',
  partialsDir: './src/components/**/*.hbs'
});

// 打印加载的Partial名称
hbsEngine.getPartials().then(partials => {
  console.log('已加载的Partial:', Object.keys(partials));
});

这样调整后，express-handlebars应该就能正确识别components子目录下的所有Partial了。

内容的提问来源于stack exchange，提问作者Ash._