Vite项目中node_modules内.hbs文件无加载器配置的解决方案咨询

核心问题 #

Vite默认会跳过node_modules目录下文件的自定义转换逻辑（仅处理预定义的文件类型），而你的依赖是未打包的源码，其中的.hbs文件没有被任何加载器处理，导致打包报错No loader is configured for ".hbs" files。

解决方案 #

1. 调整自定义插件，指定处理目标依赖 #

修改你编写的hbsfilter插件，明确指定要处理node_modules中你的目标依赖内的.hbs文件，同时设置插件执行优先级为pre（确保在其他插件之前处理）：

function hbsfilter() {
  return {
    name: 'hbsfilter',
    enforce: 'pre', // 优先执行此插件
    // 指定要处理的文件范围：项目内的.hbs + 目标依赖内的.hbs
    transformInclude(id) {
      return id.endsWith('.hbs') || id.endsWith('.hbs?raw') 
        || (id.includes('node_modules/你的依赖包名') && (id.endsWith('.hbs') || id.endsWith('.hbs?raw')));
    },
    transform(code, id) {
      if (id.endsWith('.hbs') || id.endsWith('.hbs?raw')) {
        return {
          code: `export default ${JSON.stringify(code)};`,
          map: { mappings: '' }
        };
      }
      return null; // 不需要处理的文件直接返回null即可
    }
  };
}

exports.hbsfilter = hbsfilter;

2. 配置Vite，排除目标依赖的预构建 #

Vite的依赖预构建会把node_modules里的依赖打包成ES模块，但预构建过程中不会应用你的自定义插件，所以需要把这个未打包的依赖排除在预构建之外，让插件直接处理它：

import { defineConfig } from 'vite';
import { hbsfilter } from './你的插件路径';

export default defineConfig({
  plugins: [hbsfilter()],
  optimizeDeps: {
    exclude: ['你的依赖包名'] // 不让Vite预构建这个依赖
  },
  // 如果是SSR场景，额外添加以下配置
  ssr: {
    noExternal: ['你的依赖包名']
  }
});

3. 验证插件是否生效 #

如果还是没生效，可以在插件的transform钩子中添加日志，确认目标文件是否被捕获：

transform(code, id) {
  console.log('正在处理文件:', id); // 查看是否打印了目标依赖的.hbs路径
  // ... 原有逻辑
}

替代方案：使用vite-plugin-raw加载.hbs #

如果自定义插件仍有问题，可以尝试vite-plugin-raw，并配置它处理node_modules中的目标依赖：

import { defineConfig } from 'vite';
import rawPlugin from 'vite-plugin-raw';

export default defineConfig({
  plugins: [
    rawPlugin({
      include: [
        '**/*.hbs',
        'node_modules/你的依赖包名/**/*.hbs'
      ]
    })
  ],
  optimizeDeps: {
    exclude: ['你的依赖包名']
  }
});

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