Next.js+Mikro-ORM+TypeGraphQL在Vercel中用glob批量导入Resolver的方法？

方案1：使用webpack require.context 静态导入 #

Vercel构建阶段会做静态代码分析，动态拼接的import路径无法被webpack识别，而require.context是webpack提供的静态API，能让构建工具提前扫描并打包匹配的文件。

在src/pages/api/graphql目录下创建resolvers/index.ts，写入以下代码：

// 扫描当前目录及子目录下所有以.resolver.ts结尾的文件
const resolverContext = require.context('../', true, /\.resolver\.ts$/);

// 提取所有resolver导出的类
const resolvers = resolverContext.keys().map(key => {
  const resolverModule = resolverContext(key);
  // 假设每个resolver文件默认导出Resolver类
  return resolverModule.default || resolverModule;
});

export default resolvers;

然后在你的GraphQL API入口文件里直接导入这个汇总文件：

import resolvers from './resolvers';

方案2：预生成Resolver导入文件（适合不想依赖webpack API的场景） #

写一个Node.js脚本，在构建前自动生成包含所有Resolver导入的文件，让构建工具能直接识别静态导入语句。

1. 项目根目录创建scripts/generate-resolvers.ts：

import fs from 'fs/promises';
import path from 'path';
import glob from 'glob';

async function generateResolverIndex() {
  const resolverPaths = glob.sync(path.join(__dirname, '../src/pages/api/graphql/**/*.resolver.ts'));
  
  // 生成导入语句
  const importStatements = resolverPaths.map((filePath, index) => {
    const relativePath = path.relative(path.join(__dirname, '../src/pages/api/graphql'), filePath).replace('.ts', '');
    return `import Resolver${index} from './${relativePath}';`;
  });
  
  // 生成导出语句
  const exportStatement = `export default [${resolverPaths.map((_, index) => `Resolver${index}`).join(', ')}];`;
  
  // 拼接成完整文件内容
  const fileContent = `${importStatements.join('\n')}\n\n${exportStatement}`;
  
  // 写入到resolvers/index.ts
  await fs.writeFile(path.join(__dirname, '../src/pages/api/graphql/resolvers/index.ts'), fileContent);
}

generateResolverIndex().catch(err => console.error('生成Resolver导入文件失败:', err));

2. 在package.json的scripts中添加预构建命令：

{
  "scripts": {
    "prebuild": "ts-node scripts/generate-resolvers.ts",
    "build": "next build",
    // 其他脚本...
  }
}

这样每次执行npm run build前，脚本会自动生成包含所有Resolver导入的文件，Vercel构建时就能正常识别这些静态导入。

方案3：使用TypeScript路径映射+静态导入模式 #

如果你的Resolver都放在固定目录，可以通过TypeScript路径映射简化导入，同时手动维护一个汇总文件（部分TypeScript版本支持通配符导入）：

在tsconfig.json中添加路径映射：

{
  "compilerOptions": {
    "paths": {
      "@/graphql/resolvers/*": ["./src/pages/api/graphql/*"]
    }
  }
}

然后在resolvers/index.ts中用批量导入：

// 注意：部分TypeScript版本和构建工具支持这种通配符导入，需测试
import * as resolverModules from '@/graphql/resolvers/**/*.resolver.ts';

const resolvers = Object.values(resolverModules).map(module => module.default || module);
export default resolvers;

不过这个方案兼容性不如前两个，建议优先选方案1或2。

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