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)
require.context批量引入文件的更多相关文章
- require.context实现前端工程自动化
require.context是什么 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多 ...
- 使用require.context实现前端工程自动化
require.context是什么 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多 ...
- Vue 引入指定目录文件夹所有的组件 require.context
require.context require.context是webpack中用来管理依赖的一个函数,此方法会生成一个上下文模块,包含目录下所有的模块的引用,同构正则表达式匹配,然后require进 ...
- vuex前端工程化之动态导入文件--require.context( )
随着项目的复杂,文件结构越来越多,Store中modules中的文件也越来越多,如果一个一个加载是不是很麻烦呢? 先看一个项目中store项目结构: 过去都是通过import分别引入文件: 1 imp ...
- php引入文件(include 和require的区别)
引入文件: 首先需要一个php文件: <?php class shao//类名必须和文件名相同!!! { public $xxx="666"; } $shili = new ...
- php 引入文件 include 和require
php 如何引用文件? 先建一个php 文件,php文件名要和所建的类名相同, 然后直接在php 中用include("")/include"" 和requir ...
- php include,require 主要是向网页中引入文件
- require - 引入文件
导入 /** * Creates the node for the load command. Only used in browser envs. */ req.createNode = funct ...
- require.context('.', true, /\.router\.js/) webpack 编译的时候读取目录文件
const routerList = [] function importAll (r) { r.keys().map(value => { r(value).default.map(item ...
随机推荐
- MathType转Word公式(OMML)
背景 由于之前个人喜欢在Word里做笔记,而有很多笔记里存在着大量的公式.在早期,由于对Word自身的公式的不理解,所以便使用了MathType这个工具来编写公式.但是现在本人已经转战到LatTeX了 ...
- nyoj 991 Registration system (map)
Registration system 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 A new e-mail service "Berlandesk&q ...
- 通过canvas合成图片
通过canvas合成图片 效果图 页面布局部分 两个图片以及一个canvas画布 <img src="https://qnlite.gtimg.com/qqnewslite/20190 ...
- 小白学习React官方文档看不懂怎么办?
最近在上React课程的时候,发现好多同学不会看文档,所以在这里写一篇文章,希望能给同学们一点点启发. 我们首先打开React官方网站——https://react.docschina.org/doc ...
- Alibaba Nacos 学习(二):Spring Cloud Nacos Config
Alibaba Nacos 学习(一):Nacos介绍与安装 Alibaba Nacos 学习(二):Spring Cloud Nacos Config Alibaba Nacos 学习(三):Spr ...
- 扛把子组2018092609-2 选题 Scrum立会报告+燃尽图 06
此作业的要求参见[https://edu.cnblogs.com/campus/nenu/2019fall/homework/8681] 一.小组情况组长:迟俊文组员:宋晓丽 梁梦瑶 韩昊 刘信鹏队名 ...
- linux网络配置(ifcfg)
将linux主机接入到网络需要配置哪些配置项? IP/NETMASK:本地通信. 路由(网管):跨网络通信. DNS服务器地址:基于主机名通信. DNS服务器有三种:主/备用DNS服务器/第三备份dn ...
- 初探three.js材质
这节我们浅谈一下THREE的材质.材质就是物体的皮肤,决定物体的表面.THREE的材质有很多种,他们有的和到相机的距离有关,有的和面的法向量角度有关,有的不受光照的影响,有的受到光照的影响会产生反射效 ...
- https的安装(基于阿里云)
背景介绍:首先我的服务器在是阿里云的云服务器,web服务器使用的是nginx 进入到阿里云的ssl证书的管理界面,按需选择套餐后进行申请,申请完成后进行补全操作,最后是变成如下界面点击--下载进行证书 ...
- 10-kubernetes serveraccount RBAC
目录 认证安全 serviceAccountName 和 userAccount serviceaccount 创建 使用admin 的SA 测试 URL访问kubernetes资源 APIserve ...