使用require.context自动化导入ES模块

require.context是什么
一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块。

什么时候需要用到require.context？

在项目很大之后,每次手动import会显得有些力不从心,这里可以使用require.context函数遍历modules文件夹的所有文件一次性导入到index.ts中

/**
* @param directory 要搜索的文件夹目录不能是变量，否则在编译阶段无法定位目录
* @param useSubdirectories  是否搜索子目录
* @param regExp 匹配文件的正则表达式
* @return 
  function 返回一个具有 resolve, keys, id 三个属性的方法
  resolve() 它返回请求被解析后得到的模块 id
  keys() 它返回一个数组，由所有符合上下文模块处理的请求组成。 
  id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到
*/

const files = require.context('.', false, /\.ts$/)

let operateRouterConfig: any = []

files.keys().forEach((key: any) => {
  if (key === './index.ts') { return }
  operateRouterConfig = operateRouterConfig
    .concat(files(key).default)
    .sort((a: any, b: any) => a.meta.sort ? (a.meta.sort - b.meta.sort) : -1)
    
})


export default operateRouterConfig

require.context分析

require.context函数接受三个参数

directory {String} -读取文件的路径
useSubdirectories {Boolean} -是否遍历文件的子目录
regExp {RegExp} -匹配文件的正则

语法: require.context(directory, useSubdirectories = false, regExp = /^.//);

借用webpakc官网的例子

require.context('./test', false, /.test.js$/);