启用ES模块模式后，如何替代require.context实现Vue路由自动导入

• 项目计划全量采用ES模块规范替换传统CommonJS写法，已在根目录package.json添加"type": "module"配置开启ESM模式
• 原有自动导入页面路由的逻辑，依赖Webpack提供的require.context能力实现：扫描@/pages目录下所有符合规则的route.js文件，同步生成路由表
• 开启ESM配置后直接触发运行报错，临时移除"type": "module"配置项目可正常运行，但不符合预期的ESM使用要求

• 配置文件层面的兼容冲突：Babel、项目构建脚本的底层逻辑默认通过CommonJS的require方法加载babel.config.js这类配置文件。因为根目录声明了"type": "module"，Node会将当前作用域下所有.js文件识别为ES模块，无法被require直接调用，就会抛出require() of ES modules is not supported的告警
• 语法体系的不兼容：require.context是Webpack针对CommonJS体系设计的语法扩展，本身不属于原生JS规范，在纯ESM代码流中无法被正常识别执行

整个方案不需要移除项目根目录的"type": "module"配置，也不需要写异步等待的hack逻辑：

• 第一步：解决配置文件的加载冲突
  将所有会被Node层通过require调用的配置文件（比如babel.config.js、vue.config.js）重命名为.cjs后缀，明确标记这些文件属于CommonJS模块，Node在加载时会跳过ESM解析规则，完全不影响项目主代码的ESM运行逻辑
• 第二步：替换批量导入的路由扫描逻辑
  完全根据你使用的构建工具选择对应的ESM原生兼容API，替代老的require.context，且全部支持同步执行，和原有逻辑的行为完全一致：
  • 若使用Vite作为构建工具：直接调用import.meta.globAPI，设置eager: true开启同步加载模式，不需要异步等待：

    import { createRouter, createWebHistory } from 'vue-router'
    
    function autoImportRoutes() {
      // 参数说明：扫描路径、递归匹配开关、同步加载配置
      const routeModules = import.meta.glob('@/pages/**/route.js', { eager: true })
      return Object.values(routeModules).map(mod => mod.default)
    }
    
    const routes = autoImportRoutes()
    
    const router = createRouter({
      // ESM模式下环境变量读取方式调整为import.meta.env
      history: createWebHistory(import.meta.env.BASE_URL),
      routes
    })
    
    export default router
    

  • 若使用Webpack 5+作为构建工具：调用Webpack提供的ESM兼容上下文APIimport.meta.webpackContext，参数和老的require.context完全一致：

    function autoImportRoutes() {
      // 匹配规则和require.context完全对齐：扫描根路径、递归遍历、正则匹配
      const context = import.meta.webpackContext('@/pages/', {
        recursive: true,
        regExp: /route\.js$/
      })
      return context.keys().map(key => context(key).default)
    }
    

• 关于异步问题的说明
  之前感知到的动态import()异步特性，来自非静态可分析的动态导入场景。上面提到的两个构建工具的上下文扫描API，本质是在构建阶段把所有匹配的模块静态打入产物，运行时调用时直接同步返回模块内容，和require.context的执行时机、行为完全一致，不存在初始化时路由未加载的问题，也不需要额外的强制等待逻辑。

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