自动化的关键API---require.context()什么是require.context？require.context是webpack的一个api，require.context函数获取具体的上下文，通过该方法实现模块的自动导入。使用场景：Vue使用高频组件时，每次需要使用该组件的页面都要导入一次。这样的操作显然不够优雅。解决方案：使用require.context全局自动注册组件，页面无需导入组件即可使用解析require.context语法：require.context(directory,useSubdirectories=true,regExp=/^\.\/.*$/);该方法接收3个参数directory{String}-读取文件的路径useSubdirectories{Boolean}-是否遍历文件的子目录regExp{RegExp}-匹配文件的规律性constrequireComponent=require.context('./components/App',false,/\.vue$/)//keys方法返回匹配文件名的数组['./nav.vue','./tab.vue']requireComponent.keys()。forEach(key=>{console.log(requireComponent(key))//返回一个模块，这个模块是真正需要的console.log(requireComponent.id)//./src/components/Appsync\.vue$console.log(requireComponent.resolve(key))//./src/components/App/nav.vueconsole.log(key)//./nav.vue})返回一个带有一个参数和三个属性（resolve，keys）的函数,id)解析{Function}-接受一个参数request，request是components文件夹下匹配文件的相对路径，返回匹配文件相对于整个项目的相对路径keys{Function}-返回匹配成功的模块名称Arrayid{String}-执行环境的id，返回一个字符串，主要用于module.hot.accept，应该是热加载吧？requireComponent(req)函数接收一个参数，该参数是文件的相对路径，execute函数返回一个模块，并读取模块的内容。全局使用自动注册组件。//一个实现前端工程的自动化，全局自动导入high-level音频组件插件importVuefrom'vue'//首字母大写的方法函数changeStr(str){returnstr.charAt(0).toUpperCase()+str.slice(1)}/***require.context是webpack提供的方法*参数1：directory{String}-读取文件的路径*参数2：useSubdirectories{Boolean}-是否遍历文件的子目录*参数3：regExp{RegExp}-的正则性匹配文件*/constrequireComponent=require.context('./',false,/\.vue$/)//这是一个vue插件，使用vue.use()注册插件，必须提供安装methodconstinstall=vue=>{requireComponent.keys().forEach(fileName=>{//获取每个组件的配置letcompConfig=requireComponent(fileName)letcompName=changeStr(fileName.replace(/^\.\//,'').replace(/\.\w+$/,''))//导入组件Vue.component(compName,compConfig.default||compConfig)})}exportdefault{install}自动导入路由文件如果这是一个巨大的项目ect，为了更好的管理路由文件，路由一般是分层处理的，然后使用importVuefrom'vue'importVueRouterfrom'vue-router'importHomefrom'../views/Home.vue'constrequireRoutes=require.context('./routes',false,/route\.js$/)constrouteMap=requireRoutes.keys().map(route=>{returnrequireRoutes(route).default})Vue.use(VueRouter)constroutes=[{path:'/',name:'Home',component:Home},...routeMap]constrouter=newVueRouter({路由})exportdefaultrouter//mine.route.jsexportdefault{path:'/mine',name:'Mine',component:()=>import('../../views/mine/layout'),children:[{path:'',component:()=>import('../../views/mine')},{path:'collect',component:()=>import('../../views/mine/collect')},{path:'order',component:()=>import('../../views/mine/order')},{path:'order/:id',component:()=>import('../../views/mine/order/detail')}]}
