require.context 自动引入指定目录下的文件、组件、redux

标签：文件 webpacks require item let context redux

1、 语法：let  webpacks = require.context (directory,useSubdirectories,regExp) 

　　(directory："文件路径"，useSubdirectories："布尔值"，regExp："正则表达式")

　　// 返回值 是webpack实例 

2、require.context实例有两个方法： let list=webpacks .keys()   // 获取到每一个暴露的内容，数组结构         webpack('路径').default   // 获取到路径中导出的模块

3、作用：自动获取文件中的暴露内容

4、案例：自动注册全局组件，用户在 指定文件 ，只要创建一个.vue 然后创建成一个全局组件https://www.ips99.com/show/4/184620.html

//自动的方法
//  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

标签：文件,webpacks,require,item,let,context,redux
来源： https://www.ips99.com/show/4/184620.html