require.context 自动引入指定目录下的文件、组件、reducer
阅读原文时间:2023年07月08日阅读:1

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