require.context
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;
本文作者:HuangBingQuan
本文链接:https://www.cnblogs.com/bingquan1/p/17578481.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步