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

妖狐艹你老母 2023-01-13 01:37 125阅读 0赞

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

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

![20210415100957684.png][]

在项目很大之后,每次手动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$/);

[20210415100957684.png]: /images/20221022/e0989c9e1eac4448b914dac625cc8c70.png