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> /// 返回指定 ...
随机推荐
- Day27:异常详解
异常 1.1 异常概述 异常(Exception)指程序运行中出现的不正常情况:文件找不到.网络异常.非法参数等等. 我们通过代码来了解一下: public class Demo{ public st ...
- Qt_CLion
目录 安装Qt和CLion 配置 CLion配置Qt的资源文件系统 在项目根文件夹下创建一个资源文件夹 在项目根目录下创建一个qrc文件 安装Qt和CLion 相关的安装网上有很多教程,安装步骤这里不 ...
- 2.9:数据交换-csv、Excel、json、爬虫、Tushare获取数据
〇.任务 1. 使用Python基础文件读写函数完成CSV文件的处理: 2. 使用标准CSV库完成CSV文件的处理: 3. 使用Excel库完成Excel文件的处理: 4. Python数据结构和Js ...
- 【SQL真题】SQL2:平均播放进度大于60%的视频类别
题目:https://www.nowcoder.com/practice/c60242566ad94bc29959de0cdc6d95ef?tpId=268&tqId=2285039& ...
- Introduction & Directory
一个日常划水的高中生而已啦,我不会承认这个博客的CSS是copy的 一个貌似并不准确的图-- <算法竞赛进阶指南>学习: 动态规划: DP经典例题--LIS&LCS 洛谷题解: 搜 ...
- Apache HttpClient 5 笔记: SSL, Proxy 和 Multipart Upload
Apache HttpClient 5 最近要在非SpringBoot环境调用OpenFeign接口, 需要用到httpclient, 注意到现在 HttpClient 版本已经到 5.2.1 了. ...
- ubunut安装qtcreater
安装gcc 1 kxb@kxb:~$ gcc -v 2 3 Command 'gcc' not found, but can be installed with: 4 5 sudo apt insta ...
- 数据结构与算法 -> 大顶堆与小顶堆
一.大顶堆 大顶堆是一种数据结构,它是一颗完全二叉树,并且满足以下性质: 每个节点的值都大于或等于它的子节点的值 因此,大顶堆的根节点(也称为堆顶)总是最大的元素 二.小顶堆 小顶堆也是一种数据结构, ...
- BBS项目功能编写逻辑思路汇总
BBS项目功能编写逻辑思路汇总 一.BBS创数据表 二.BBS注册功能 三.BBS登录功能 四.BBS首页搭建 五.BBS修改密码 六.BBS个人站点 七.BBS文章详情 八.BBS导入模块 九.BB ...
- order by 语句怎么优化?
说明 当前演示的数据库版本5.7 一.一个简单使用示例 先创建一张订单表 CREATE TABLE `order_info` ( `id` int NOT NULL AUTO_INCREMENT CO ...