Next.js环境下Babel的exclude配置未生效无法排除指定目录

• Babel 7.x的exclude默认采用相对配置文件所在目录的路径匹配规则，若你配置的prisma是纯目录名，仅会排除目录本身，不会递归匹配目录下的所有子文件，内部大体积JS依然会被Babel扫描处理。
• Next.js框架会默认覆盖部分Babel配置项，单独在babel.config.json中配置的exclude优先级低于Next.js内置的Babel处理逻辑，很容易失效。
• 你使用的Babel 7.12.13存在已知的目录匹配缺陷，纯字符串格式的目录排除规则不会作用于目录内部的导入文件。

方案1：调整Babel配置的匹配规则 #

修改babel.config.json的exclude字段，同时兼容glob通配符和正则两种匹配格式，确保递归排除目标目录下所有文件：

{
  "...": "你的其他原有配置",
  "exclude": [
    "**/node_modules/**",
    "**/prisma/**",
    /node_modules/,
    /prisma/
  ]
}

方案2：在Next.js配置中指定Babel排除规则（优先级最高） #

直接修改项目根目录的next.config.js，通过webpack配置修改babel-loader的排除逻辑，避免被Next.js覆盖：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 你的其他Next.js配置
  // 如果prisma目录不在项目根目录范围内，可开启以下配置
  // experimental: { externalDir: true },
  webpack: (config) => {
    config.module.rules.forEach((rule) => {
      // 找到babel-loader对应的规则，修改排除项
      if (rule.use?.loader?.includes('babel-loader')) {
        rule.exclude = [/node_modules/, /prisma/]
      }
    })
    return config
  }
}

module.exports = nextConfig

方案3：临时关闭Babel大文件优化提示 #

如果仅需要消除代码生成的deoptimised提示，可以在Babel配置中添加generator参数跳过体积校验：

{
  "...": "你的其他原有配置",
  "generatorOpts": {
    "compact": false
  }
}

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