不用再import模块了？require.context 批量引入

自动导入指定目录下的 JS 模块

在 webpack 的构建系统中，require.context 是一个强大的 API，它允许我们按条件动态地导入模块。这个 API 尤其适用于批量导入某个目录下的所有模块，这在大型项目或者需要动态加载模块的场景中非常有用。

使用 require.context，我们可以指定一个目录，并设置是否包括子目录以及一个用于匹配文件名的正则表达式。webpack 在构建时，会根据这些条件找出所有符合条件的文件，并在运行时生成一个模块映射，供我们动态地加载这些模块。

下面是一个示例，展示了如何使用 require.context 来自动导入指定目录下的 JS 模块：

// 创建一个 require.context，用于导入 './module' 目录下所有以 .js 结尾的文件
var rm = require.context('./module', false, /\.js$/);

// 使用 rm.keys() 获取所有匹配文件的路径数组
const paths = rm.keys();

// 使用 reduce 方法将文件路径转换为模块对象，并存储在一个新的对象中
const modules = paths.reduce((modules, pathName) => {
  // 使用正则表达式从路径中提取模块名
  const moduleName = pathName.replace(/\.\/(.*)\.\w+$/, '$1');
  // 使用 rm() 函数动态地导入模块，并获取其 default 导出
  const module = rm(pathName).default;
  // 将模块添加到 modules 对象中，以模块名为键
  modules[moduleName] = module;
  // 返回更新后的 modules 对象
  return modules;
}, {});

// 现在，modules 对象包含了指定目录下所有模块的引用
// 可以通过模块名来访问这些模块
console.log(modules);

在上面的代码中，我们首先使用 require.context 创建了一个上下文对象 rm，它指向了 ./module 目录下的所有以 .js 结尾的文件。然后，我们使用 rm.keys() 方法获取了所有匹配文件的路径数组。

接下来，我们使用 Array.prototype.reduce() 方法来遍历这些路径，并将它们转换为模块对象。在每次迭代中，我们使用正则表达式从路径中提取出模块名，并使用 rm() 函数动态地导入该模块。然后，我们将导入的模块添加到 modules 对象中，以模块名为键。最后，我们返回更新后的 modules 对象。

现在，modules 对象包含了指定目录下所有模块的引用，我们可以通过模块名来访问这些模块。这使得在运行时动态地加载和使用这些模块变得非常容易。

需要注意的是，require.context 是 webpack 特有的 API，因此在 Node.js 环境中是无法使用的。此外，在使用 require.context 时，需要确保文件路径和正则表达式的正确性，以避免导入错误或不必要的文件。

源站