使用webpack或者vite批量导入模块

前言

有时候我们需要一次性导入router文件夹下的所有js文件，如何一次性的导入呢？

webpack

在webpack中可以使用 require.context 方法批量导入模块。

require.context 方法接收三个参数：要搜索的目录、是否搜索子目录、匹配文件的正则表达式。

例如，要在 ./src 目录下搜索所有以 .js 结尾的文件，可以使用以下代码：
const context = require.context('./src', true, /\.js$/)

然后可以使用 context.keys() 方法获取所有匹配的文件路径，再使用 context(key) 方法获取对应的模块。

例如，要获取所有匹配的模块，可以使用以下代码：
const modules = context.keys().map(context)

上述代码中，modules 数组中存储了所有匹配的模块。可以根据需要对这些模块进行处理，例如将它们导入到一个对象中：

const moduleMap = {};
modules.forEach((module) => {
  const moduleName = module.default.name;
  moduleMap[moduleName] = module.default;
});

这样就可以通过 moduleMap 对象来访问所有匹配的模块了。

vite

在vite中可以使用import.meta.glob来解决

它接收一个参数，即匹配文件的模式，可以是字符串或正则表达式。

例如，要在 ./src 目录下搜索所有以 .js 结尾的文件，可以使用以下代码：
const modules = import.meta.glob('./src/**/*.js')

上述代码中，modules 是一个对象，它的键是匹配的文件路径，值是对应的模块。

例如，要获取 ./src/router/main.js 模块，可以使用以下代码：
const mainRouter = await modules['./src/router/main.js']()

如果要获取所有匹配的模块，可以使用 Object.values 方法：

const allModules = await Promise.all(Object.values(modules).map(module => module()))

这样就可以通过 allModules 数组来访问所有匹配的模块了。