如何递归导入模块/插件？批量加载目录模块问题求助

嘿，我来帮你搞定这个问题！你用require.context的思路是对的，但问题出在只创建了上下文，却没真正遍历加载并注册模块里的导出内容——这就是为啥你能在入口看到文件内容，但后续代码找不到函数的原因。

先给你拆解一下require.context的正确用法，再给你两种常见场景的解决方案：

第一步：先搞懂require.context的本质 #

require.context('dir1/plugins', true, /index\.js/)返回的是一个模块上下文函数，它本身不会自动加载所有模块，你得主动遍历它返回的文件路径，再逐个调用这个函数去加载模块、获取导出内容。

场景1：插件是默认导出（比如类/函数） #

如果你的插件都是用export default导出的（比如每个index.js里都导出一个插件类或初始化函数），可以这么写：

// 创建插件上下文
const pluginContext = require.context('dir1/plugins', true, /index\.js/);

// 遍历所有匹配的插件文件
pluginContext.keys().forEach(key => {
  // 加载模块并获取默认导出
  const Plugin = pluginContext(key).default;
  
  // 根据插件类型处理：如果是初始化函数就直接调用，如果是类就实例化
  if (typeof Plugin === 'function') {
    // 假设插件是初始化函数，直接执行
    Plugin();
    // 或者如果是类，就实例化（按需调整）
    // const pluginInstance = new Plugin();
    // 可以把实例存到全局对象里方便后续调用，比如window.plugins[key] = pluginInstance;
  }
});

场景2：插件是命名导出（比如导出特定函数） #

如果你的插件是用export命名导出的（比如每个文件里都导出了init、doSomething这类函数），可以这么处理：

const pluginContext = require.context('dir1/plugins', true, /index\.js/);

pluginContext.keys().forEach(key => {
  // 获取模块的所有命名导出
  const pluginExports = pluginContext(key);
  
  // 调用插件里的初始化函数（按需调整函数名）
  if (pluginExports.init && typeof pluginExports.init === 'function') {
    pluginExports.init();
  }
  
  // 也可以把所有导出挂载到全局，方便后续调用
  // Object.assign(window.myPlugins, pluginExports);
});

关键注意点 #

1. 正则表达式要匹配正确的文件：如果你的插件不是放在index.js里，而是直接叫one.js、two.js，那正则要改成/\.js$/，不然会漏掉文件。
2. 确认模块的导出方式：如果你的插件既用了默认导出又用了命名导出，要对应好代码里的获取方式（.default或者直接取属性）。
3. 存储实例/函数方便后续调用：如果后续代码需要调用插件的函数，记得把实例或函数挂载到全局对象（比如自定义的window.plugins），或者存到一个模块级变量里。

举个实际例子，假设你的one/index.js是这样的：

export default class OnePlugin {
  sayHello() {
    console.log('Hello from One Plugin!');
  }
}

批量加载后要调用的话，可以这么存实例：

const loadedPlugins = {};
pluginContext.keys().forEach(key => {
  const PluginClass = pluginContext(key).default;
  loadedPlugins[key] = new PluginClass();
});

// 后续代码里调用
loadedPlugins['./one/index.js'].sayHello(); // 输出Hello from One Plugin!

这样就能实现无例外批量加载，不用逐个写import啦！

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