语法: require.context(directory, useSubdirectories = false, regExp = /^.//);

  1. directory {String} -读取文件的路径

  2. useSubdirectories {Boolean} -是否遍历文件的子目录

  3. 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自动化导入的更多相关文章

  1. require.context实现前端工程自动化

    require.context是什么 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多 ...

  2. 使用require.context实现前端工程自动化

    require.context是什么 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多 ...

  3. Vue 引入指定目录文件夹所有的组件 require.context

    require.context require.context是webpack中用来管理依赖的一个函数,此方法会生成一个上下文模块,包含目录下所有的模块的引用,同构正则表达式匹配,然后require进 ...

  4. require.context批量引入文件

    require.context 是什么 require.context 是由webpack内部实现,require.context在构建时,webpack 在代码中进行解析. 当需要引入文件夹内多个文 ...

  5. vue 动态注册路由 require.context

    需求场景: 在日常的功能练习和调试过程中,需要一个demo项目进行功能测试,由于频繁.vue页面的同时,又要再router.js文件里面注册路由,感觉有点无聊和枯燥.基于此出发点,考虑能否自动读取文件 ...

  6. vuex前端工程化之动态导入文件--require.context( )

    随着项目的复杂,文件结构越来越多,Store中modules中的文件也越来越多,如果一个一个加载是不是很麻烦呢? 先看一个项目中store项目结构: 过去都是通过import分别引入文件: 1 imp ...

  7. [Vue]webpack的require与require.context

    1.require 1.1完整路径的require语句: require('tools'); //preset alias tools require('./js/main'); 1.2带表达式的 r ...

  8. vue 动态添加路由 require.context()

    之前的写法 'use strict' import Vue from 'vue' import MessageBroadcast from 'page/MessageBroadcast' import ...

  9. vue 优化小技巧 之 require.context()

    1.require.context() 回忆一下 当我们引入组件时 第一步 创建一个子组件 第二步 import ... form ... 第三步 components:{..} 第四步 页面使用 & ...

随机推荐

  1. 用var声明变量,在java中居然有这么多细节,你都了解么?

    简介 Java SE 10引入了局部变量的类型推断.早先,所有的局部变量声明都要在左侧声明明确类型. 使用类型推断,一些显式类型可以替换为具有初始化值的局部变量保留类型var,这种作为局部变量类型 的 ...

  2. (转)交叉编译lrzsz

    交叉编译lrzsz 2016-03-20 1. 系统环境: Distributor ID:    Ubuntu Description:    Ubuntu 14.04.1 LTS Release:  ...

  3. 18、Java中的 数据结构

    Java2中引入了新的数据结构 集合框架 Collection,下一节再谈论(非常重要,面试也常问). 1.枚举 (Enumeration) 1.1 Enumeration 源码: public in ...

  4. Tomcat Windows 开机自启

    在命令提示符中,进入 tomcat 的 bin 目录,执行命令,注册服务 service.bat install 在"服务"中,将 tomcat 服务设为自动

  5. 【Linux】zookeeper-3.5.6启动失败8080端口被占用

    通过查看zookeeper的官方文档 1. 可以禁用adminServer 2.可以删除jetty服务

  6. C#LeetCode刷题之#242-有效的字母异位词(Valid Anagram)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4040 访问. 给定两个字符串 s 和 t ,编写一个函数来判断 ...

  7. 精讲RestTemplate第6篇-文件上传下载与大文件流式下载

    本文是精讲RestTemplate第6篇,前篇的blog访问地址如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 精讲RestTemplate第2篇-多种底层H ...

  8. 极简 Node.js 入门 - 2.4 定时器

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  9. 清晰详细、可测量、可达到、目标导向、有时间限定,SMART目标定制原则

    设定目标的时候需要考虑的问题,可以对已经设定的目标进行完善 S 目标是清晰的,明确的 M 目标可以衡量的,可以用来评估的 A 目标是可以达到的,但是达到的过程有难度 R 目标导向,设定的目标对大目标具 ...

  10. Jmeter 常用函数(9)- 详解 __UUID

    如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用 返回 伪随机类型4 通用唯一标识符 语 ...