语法: 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. 002_go语言的值类型

    代码演示: package main import "fmt" func main() { fmt.Println("go"+"lang") ...

  2. SpringBoot整合Shiro自定义Redis存储

    Shiro Shiro 主要分为 安全认证 和 接口授权 两个部分,其中的核心组件为 Subject. SecurityManager. Realms,公共部分 Shiro 都已经为我们封装好了,我们 ...

  3. 微博AnalysisQl动态数据视图元数据设计

    前言 目前,AnalysisQl 数据视图的元数据(维度.指标.指标计算器)需要通过代码(API)或资源文件的形式硬编码,应用启动时,按照声明的顺序依次注册.这种模式下,数据视图是 静态 的,任何一项 ...

  4. CPF 入门教程(一)

    CPF netcore跨平台UI框架 开发之前,你需要先安装VS2019.为什么要vs2019?因为VS2019才能支持netcore3.0以上,netcore3.0之后才能发布独立的程序,之前的都只 ...

  5. kafka-clients 1.0 内部响应接口文档

    AddOffsetsToTxnResponse version:0 name type defaultValue docString throttle_time_ms INT32 0 Duration ...

  6. IDEA使用教程(上)

     一.介绍 IDEA全称IntelliJ IDEA,是java语言开发的集成环境.idea提倡的是智能编码,目的是减少程序员的工作,其特色功能有智能的选取.丰富的导航模式.历史记录功能等,最突出的功能 ...

  7. 拼接html不显示layui进度条解决方法

    最新有个新需求,要异步拼接html并渲染数据,并且我这边是用layui的flow.load(流加载)渲染多个进度条.按官网给出的 element.progress('demo', n+'%'); 就是 ...

  8. 微服务技术栈:API网关中心,落地实现方案

    本文源码:GitHub·点这里 || GitEE·点这里 一.服务网关简介 1.外观模式 客户端与各个业务子系统的通信必须通过一个统一的外观对象进行,外观模式提供一个高层次的接口,使得子系统更易于使用 ...

  9. getting session bus failed: //bin/dbus-launch terminated abnormally with the following error: Autolaunch error: X11 initialization failed.

    今天在调试dbus程序的时候,运行程序出现了getting session bus failed: //bin/dbus-launch terminated abnormally with the f ...

  10. 推断(inference)和预测(prediction)

    上二年级的大儿子一直在喝无乳糖牛奶,最近让他尝试喝正常牛奶,看看反应如何.三天过后,儿子说,好像没反应,我可不可以说我不对乳糖敏感了. 我说,呃,这个问题不简单啊.你知道吗,这在统计学上叫推断. 儿子 ...