require.context 自动引入指定目录下的文件、组件、reducer
1、 语法:let webpacks = require.context (directory,useSubdirectories,regExp)
(directory:"文件路径",useSubdirectories:"布尔值",regExp:"正则表达式")
// 返回值 是webpack实例
2、require.context实例有两个方法: let list=webpacks .keys() // 获取到每一个暴露的内容,数组结构 webpack('路径').default // 获取到路径中导出的模块
3、作用:自动获取文件中的暴露内容
4、案例:自动注册全局组件,用户在 指定文件 ,只要创建一个.vue 然后创建成一个全局组件
//自动的方法
// require.context('文件路径','布尔值','正则') //语法:require.context('文件路径','布尔值','正则') //这个实例有两个api 1、keys() =>文件路径 =》数组结构 2、webpack(文件路径).default 这个文件内容
// function getArrs(){
let arrs = []
let webpacks= require.context('./',true,/\.vue/)
console.log(webpacks.keys()); webpacks.keys().forEach((item,index)=>{
// ./BackTop.vue
arrs.push({name:item.replace('./','').replace('.vue',''),com:webpacks(item).default})
}) return arrs } function obj(App){
console.log(66666,App); //1 自动获取到 arrs 结构 let comList = getArrs() console.log(comList); comList.forEach((item)=>{
App.component(item.name,item.com)
}) } export default obj
5、案例2:在react脚手架中合并所有的redecer,并自动添加引入
// 合拼reducer
import {combineReducers} from 'redux' // combineReducers
import CartReducer from './CartReducer'
import meReducer from './meReducer'
//这里的引入各自的reducer 引入
//处理方法=》自动引入reducer,自动合拼reducer //1 在reducers文件夹下创建一个 redcuer 文件=》再 合拼成reducer // 1webpack =》require.context =》自动获取到文件中的暴露内容 // 语法:require.context('文件路径',布尔值,正则)
// require.context('文件路径',布尔值,正则) => 返回值是 webpack 实例方式 // 两个方法 1 webf.keys() => ['文件路径','文件路径']
// 2 获取到它的内容 webpack(路径).default
let webf = require.context('./',true,/\.js/)
let list = webf.keys()
//删除 index.js
let index = list.findIndex((item,index)=>{
return item=='./index.js'; // 找出自身文件,把它排除出去
}) list.splice(index,1)
console.log(list);
// 问题 =》合并成一个对象
let objs = {}
list.forEach((item,index)=>{ //文件路径 ./ CartReducer .js
console.log(webf(item).default);
//处理属性 = item //CartReducer .js =>CartReducer
let items = item.replace('./','').replace('.js','')
objs[items ] =webf(item).default // // 获取到路径中导出的模块
})
console.log( objs); //作用:合拼reducer
//语法: let reducers = combineReducers({属性:各自的reducer,属性:各自的reducer}) let reducers = combineReducers( objs) export default reducers
require.context 自动引入指定目录下的文件、组件、reducer的更多相关文章
- python_自动查找指定目录下的文件或目录的方法
代码如下 import os def find_file(search_path, file_type="file", filename=None, file_startswith ...
- PHP 获取指定目录下所有文件(包含子目录)
PHP 获取指定目录下所有文件(包含子目录) //glob — 寻找与模式匹配的文件路径 $filter_dir = array('CVS', 'templates_c', 'log', 'img', ...
- iOS案例:读取指定目录下的文件列表
// // main.m // 读取指定目录下的文件列表 // // Created by Apple on 15/11/24. // Copyright © 2015年 Apple. All rig ...
- PHP 批量获取指定目录下的文件列表(递归,穿透所有子目录)
//调用 $dir = '/Users/xxx/www'; $exceptFolders = array('view','test'); $exceptFiles = array('BaseContr ...
- socket实现两台FTP服务器指定目录下的文件转移(不依赖第三方jar包)
通过socket实现两台FTP服务器指定目录下的文件转移,其中包含了基础了ftp文件列表显示.上传和下载.这里仅供学习用,需掌握的点有socket.ftp命令.文件流读取转换等 完整代码如下: Ftp ...
- 文件名命工具类(将指定目录下的文件的type类型的文件,进行重命名,命名后的文件将去掉type)
import java.io.File; /** * <b>function:</b> 文件命名工具类 * @author hoojo * @createDate 2012-5 ...
- linux --> 删除指定目录下所有文件
删除指定目录下所有文件 代码样例: ///////////////////////////////////////////////////// //Name: DeleteFile //Purpose ...
- C# 获取指定目录下所有文件信息
/// <summary> /// 返回指定目录下所有文件信息 /// </summary> /// <param name="strDirectory&quo ...
- python实现指定目录下批量文件的单词计数:并发版本
在 文章 <python实现指定目录下批量文件的单词计数:串行版本>中, 总体思路是: A. 一次性获取指定目录下的所有符合条件的文件 -> B. 一次性获取所有文件的所有文件行 - ...
- [转]C# 获取指定目录下所有文件信息、移动目录、拷贝目录
原文:http://blog.csdn.net/vchao13/article/details/6200255 1.获取指定目录下所有文件信息 /// <summary> /// 返回指定 ...
随机推荐
- JS图片放大镜功能实现
JS图片放大镜功能实现 技术关键点 1.左侧和上侧距离,在一个水平位置和垂直位置中有我们可以挪动的区域,就是原图片区域,鼠标挪动位置是一个块状位置,他的左侧和上侧距离浏览器上侧和左侧分别有一个长度,我 ...
- 深度学习之Tensorflow入门
声明 本文参考[中文][吴恩达课后编程作业]Course 2 - 改善深层神经网络 - 第三周作业_何宽的博客-CSDN博客我对这篇博客加上自己的理解,力求看懂 本文所使用的资料已上传到百度网盘[点击 ...
- 解决Anaconda关联VSCode使用conda运行Python报错(无法将“conda”项识别为 cmdlet、函数、脚本文件或可运行程序)
错误 刚安装好Anaconda之后创建好VS Code环境运行Python会报错,但是仍然是可以正常运行,强迫症想解决报错 PS C:\Users\Satan\Documents\Code\Pytho ...
- 快捷打开cmd管理员模式
win+s-搜索cmd 直接回车:普通用户模式的cmd CTRL+SHIFT+回车:管理员模式的cmd
- 【数据库】pgsql窗口函数,分组求sum的方式
select distinct quantity, standard_cost, sum(a.quantity*a.standard_cost) over(partition by ...
- MySQL转义字符+存储过程的使用
MySQL中大于,大于等于,小于,小于等于的转义写法 一.左边就是原来的符号,右边就是在mybatis中代替的符号 二.如何通过mysql的存储过程创建虚拟表(临时表),并插入1000条数据 这些表通 ...
- ATM购物车
ATM项目实现思路: ATM架构设计 三层架构 core目录下的src.py(浏览器) (展示层) interface目录下的多个py文件(框架) (核心逻辑层) db目录下db_handler.py ...
- day13-功能实现12
家居网购项目实现012 以下皆为部分代码,详见 https://github.com/liyuelian/furniture_mall.git 29.功能27-Ajax检验注册名 29.1需求分析/图 ...
- S2-032 CVE-2016-3081 远程代码执行
漏洞名称 CVE-2016-3081 S2-032 远程代码执行 利用条件 Struts 2.3.20 - Struts Struts 2.3.28 ( 2.3.20.3 和 2.3.24.3 除外) ...
- iOS开发小结 - 通过PUT请求上传数据
一般服务器上传数据一般都是用POST请求,这样通过AFNetworking的POST请求稳稳的,但是有一天遇到一个问题,服务器上传数据用的是PUT请求,发现用AFNetworking并不是那么好用,今 ...