首页 > 其他分享 >require.context 自动引入指定目录下的文件、组件、redux

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

时间:2023-01-06 12:48:31浏览次数:33  
标签:文件 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 然后创建成一个全局组件

//自动的方法
//  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
From: https://www.cnblogs.com/chccee/p/17030043.html

相关文章