require.context 自动引入指定目录下的文件、组件、reducer
2024-10-20 20:43:44
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
最新文章
- Nexus Repository Manager 3.0 发布
- SVG 参考手册
- uniquery 在win2008 下hold的问题。
- 【HDU 4992】 Primitive Roots (原根)
- UIImagePickerController 如何显示中文界面
- 在Servlet中使用spring注入的bean
- KMP求字符串最小循环节
- String类详解
- SQL大全基本语法
- django -使用jinja2模板引擎 自定义的过滤器
- python在图片上写汉字
- Borg Maze POJ - 3026 (BFS + 最小生成树)
- HTTPS 如何保证数据传输的安全性
- (C/C++学习笔记) 一. 基础知识
- Android Studio 中的FindBugs插件使用,轻松帮你发现Bug (转)
- node基于express的socket.io
- EasyUI Pagination 分页
- java定时器无法自动注入的问题解析(原来Spring定时器可以这样注入service)
- 传智播客.NET视频学习课件
- TCP协议 状态解析和状态统计
热门文章
- 图文详解在VMware Workstation 16 PRO虚拟机上安装Rocky 8.6 linux系统
- 【DL论文精读笔记】VGGNet
- 深度学习之tensorflow2实战:多输出模型
- i春秋Backdoor
- 安装mySql 出现 one more product requirements have not been satisified
- 函数调用时用const保护指针
- 【Hadoop学习】上:组成介绍、生态体系、环境准备、不同运行模式测试
- latex 中添加Springer LNCS 模板的\bibitem{}格式参考文献方法
- [FCC] Cash Register 计算找零
- OpenJudge 1.8.11 图像旋转