vue require.context自动化导入
语法: require.context(directory, useSubdirectories = false, regExp = /^.//);
directory {String} -读取文件的路径
useSubdirectories {Boolean} -是否遍历文件的子目录
regExp {RegExp} -匹配文件的正则
// 实现自动化导入。
const context = require.context('./', true, /\.js$/)
// console.log(context);
console.log(context.keys()); //["./index.js", "./loading/index.js", "./tabBar/index.js"]
const res = {}
context.keys().forEach(filePath => {
if (filePath === './index.js') return
let key = filePath.match(/\/(.*)\//)[1]
let value = context(filePath).default
res[key] = value })
export default res
vue 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进 ...
- require.context批量引入文件
require.context 是什么 require.context 是由webpack内部实现,require.context在构建时,webpack 在代码中进行解析. 当需要引入文件夹内多个文 ...
- vue 动态注册路由 require.context
需求场景: 在日常的功能练习和调试过程中,需要一个demo项目进行功能测试,由于频繁.vue页面的同时,又要再router.js文件里面注册路由,感觉有点无聊和枯燥.基于此出发点,考虑能否自动读取文件 ...
- vuex前端工程化之动态导入文件--require.context( )
随着项目的复杂,文件结构越来越多,Store中modules中的文件也越来越多,如果一个一个加载是不是很麻烦呢? 先看一个项目中store项目结构: 过去都是通过import分别引入文件: 1 imp ...
- [Vue]webpack的require与require.context
1.require 1.1完整路径的require语句: require('tools'); //preset alias tools require('./js/main'); 1.2带表达式的 r ...
- vue 动态添加路由 require.context()
之前的写法 'use strict' import Vue from 'vue' import MessageBroadcast from 'page/MessageBroadcast' import ...
- vue 优化小技巧 之 require.context()
1.require.context() 回忆一下 当我们引入组件时 第一步 创建一个子组件 第二步 import ... form ... 第三步 components:{..} 第四步 页面使用 & ...
随机推荐
- tree命令编译使用
有天在linux中使用tree命令时候显示--未找到命令 记下解决过程: wget ftp://mama.indstate.edu/linux/tree/tree-1.6.0.tgz tar xzv ...
- python深挖65万人的明星贴吧,探究上万个帖子的秘密
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 最近一直在关注百度明星吧,发现很多有趣的帖子,于是我就想用python把这 ...
- Vouch-proxy 实现 Zabbix4.4 对接 SSO
Vouch-proxy 实现 Zabbix 对接 SSO Zabbix 自身不支持 SSO 对接,我使用 Nginx 代理 Zabbix,将请求转发至 Vouch-proxy,由 Vouch-prox ...
- Web For Pentester 学习笔记 - XSS篇
XSS学习还是比较抽象,主要最近授权测的某基金里OA的XSS真的实在是太多了,感觉都可以做一个大合集了,加上最近看到大佬的博客,所以这里我也写一个简单的小靶场手册,顺带着也帮助自己把所有XSS的方式给 ...
- java 多态二
一 多态-转型 多态的转型分为向上转型与向下转型两种: 向上转型:当有子类对象赋值给一个父类引用时,便是向上转型,多态本身就是向上转型的过程. 使用格式: 父类类型 变量名 = new 子类类型() ...
- Linux下gcc/g++中-I(i的大写)、-L和-l
-I(i的大写)include头文件非标准库中存在的也不是在当前文件夹下的,需要将地址用-i(大写)包含例:-I /home/src/-L用到的函数或操作非标准库下的,需要将库存在的地址用-L包含,库 ...
- Vue Vue.use() / Vue.component / router-view
Vue.use Vue.use 的作用是安装插件 Vue.use 接收一个参数 如果这个参数是函数的话,Vue.use 直接调用这个函数注册组件 如果这个参数是对象的话,Vue.use 将调用 ins ...
- 树堆(Treap)学习笔记 2020.8.12
如果一棵二叉排序树的节点插入的顺序是随机的,那么这样建立的二叉排序树在大多数情况下是平衡的,可以证明,其高度期望值为 \(O( \log_2 n )\).即使存在一些极端情况,但是这种情况发生的概率很 ...
- 手动向Maven本地仓库添加ORACLE ojdbc6jar包
第一步: 把你的oracle中的ojdbc6.jar复制放到D盘首目录 这是我的D:\oracle\product\11.2.0\dbhome_1\jdbc\ D:ojdbc6.jar 但是Maven ...
- ios 创建sdk与demo同一个工程
思路摘要: 步骤1:创建一个文件夹用来放该项目 步骤2:设置工程工作区间 步骤3: 创建广告sdk项目 步骤4:创建广告sdkDemo项目 步骤5:配置一些文件 步骤6:将sdk导入到demo中进行 ...