require.context批量引入文件
时间:2022-07-23
本文章向大家介绍require.context批量引入文件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
require.context 是什么
require.context 是由webpack内部实现,require.context在构建时,webpack 在代码中进行解析。
当需要引入文件夹内多个文件模块时,可以使用 require.context 自动化批量引入,而不用手动一条一条添加。
参数
require.context 函数接收三个参数
- String 读取文件夹的路径
- Boolean 是否遍历文件夹的子目录
- RegExp 匹配文件的正则
如何使用
用我实际开发的场景来做例子,现在文件夹内有多个 api 文件,我需要将这些组合起来
api.js
//引入api文件夹下的api接口
let requireAll = require.context('./api', false, /.js$/)
//requireAll.keys()为文件名数组; requireAll(apiName)获取文件暴露的内容
const apiArr = requireAll.keys().map(apiName=> requireAll(apiName).default || requireAll(apiName))
//组合接口
let api = apiArr.reduce((prev,curr)=> Object.assign(prev,curr), {})
export default api
ruquireAllApi(apiName).default 获取的是Es6规范暴露的内容(如:export default)
ruquireAllApi(apiName) 获取的是CommonJs规范暴露的内容(如:module.exports)
- 前端黑魔法之远程控制地址栏
- 信息收集利器:ZoomEye
- go sync.Mutex 设计思想与演化过程 --转
- 漏洞预警 | Ubuntu 16.04版本存在本地提权漏洞(附EXP)
- 通过“震网三代”和Siemens PLC 0day漏洞,实现对工控系统的入侵实验
- 安卓端渗透工具DVHMA:自带漏洞的混合模式APP
- 小萝莉说Crash(二): Unrecognized selector xxx 之 ForwardInvocation
- 5分钟教程:如何通过UART获得root权限
- 源码级剖析PHP 7.2.x GD拒绝服务漏洞
- 美女程序媛发福利,读懂ANR的trace文件So easy
- Openshift高阶探索实验
- 卡卡卡!小萝莉告诉你开发iOS应用如何避免卡顿
- Bugly即将支持的ANR,精神哥告诉你是个什么鬼?
- Go语言Goroutine与Channel内存模型
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何实现SAP WebClient UI附件批量上传
- Python基础教程
- 使用Source Monitor检测Java代码的环复杂度
- 使用Source Monitor检测Java代码的环复杂度
- AndroidStdio1_2
- 使用扩展技术对SAP Fiori应用进行端到端的增强,一个实际案例介绍
- python Unhandled exception in event loop:错误解决
- SAP Fiori image的显示原理
- 解决Error:All flavors must now belong to a named flavor dimension.
- 同时搞定Android和iOS的Dart语言(3):数值类型
- SAP Fiori图标(icon)设计原理
- SAP Fiori应用发生超时错误的一个可能原因
- 如何用云开发快速搭建实时 Todo List 应用
- Angular应用的入口
- Angular里的structural directive的一个例子