526互联

require.context

发布时间 2023-07-24 22:21:37作者: HuangBingQuan

1、什么是 require.context
一个webpack的api，通过该函数可以获取一个上下文，从而实现工程自动化（遍历文件夹下的文件，从中获取指定文件，自动导入模块）在前端工程中，如果一个文件夹中的模块需要频繁引用时可以使用该中方式一次性引入。
2、使用

/*
 *  dirname: string. 需要读取模块文件的所在目录
 *  useSubdirectories: boolean 是否遍历子目录
 *  RegExp：匹配的规则（正则表达式）
 */
 require.context(dirname，useSubdirectories，RegExp)；

 //举个例子
 遍历获取当前目录下所有的js文件（包括子目录）
 require.context(".", true, /(.js$)/)

3、返回结果

  // key 返回一个数组，由匹配成功的文件所组成的数组，id 执行环境的id
  { keys: function, id: string }

4、应用场景

  • 将api下的文件自动导入进行分类，并挂入原型中
// ---- index.js
const requireApi = require.context(".", true, /.js$/);

const http = {};

const excludes = ['./index.js']; // 白名单文件

requireApi.keys().forEach((key, index)=> {
  if(!excludes.includes(key)) {
    const moduleName = key.replace(/(.*\/)*([^.]+).*/ig, "$2");
    http[moduleName] = requireApi(key);
  }
})

window.$http = http;

export default http;

// man.js
import http from "@api/index.js";
Vue.prototype.$http = http;