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
手机扫一扫
移动阅读更方便
你可能感兴趣的文章