require.context实现前端工程化

一、require.context是什么

一个webpack的api，通过只想require.context函数获取一个特定的上下文，主要用来实现自动化到入模块，在前端工程周昂，如果遇到从一个文件夹引入很多模块的情况下，可以使用这个api，他会遍历文件夹中的指定文件，然后自动导入，使得不需要每次显式的调用import导入模块

二、分析require.context

require.context函数接收三个参数

      1.directory{string}-读取文件的路径

       2.useSubdirectories{Boolean}-是否便利文件的子目录

       3.regExp{ewgExp}-匹配文件的正则

语法: require.context(directory, useSubdirectories = false, regExp = /^.//);

返回值：

值得注意的是require.context函数执行后返回的是一个函数,并且这个函数有3个属性

1. resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径

2. keys {Function} -返回匹配成功模块的名字组成的数组

3. id {String} -执行环境的id,返回的是一个字符串

三、用途

1.vue全局注册组件

在项目中，我们都会针对项目的功能，将项目中高频出现的部分写成组件方便调用，这时候我们使用require.context完成组件的注册，省去在每个页面进行import的工作

比如：我们把组件全部写入components文件夹下，然后创建见componentRegiser.js使用require.context进行注册

function changStr(str){
    return str.charAt(0).toUpperCase()+str.slice(1)  
}
export default {
    install(Vue) {
        const requireAll=require.context("./components",false,/\.vue$/)
        requireAll.keys().forEach((item)=>{
            Vue.component(changStr(item.replace(/\.\//,'').replace(/\.vue$/,'')),requireAll(item).default)
        })
    }
}

然后只要在main.js里引用这个js文件，然后vue.use（）注册就可以在所有页面调用组件了，比如在components下创建helloWorld.vue组件，在页面中只需要<HelloWorld>这样就可以使用了

2.vue路由模块化

同理，也可以解决另一个问题，在vue项目中，路由文件会随着项目增大而增大，这时我们可以使用require.context进行模块化管理，

3.网络请求模块化管理

4.自定义指令模块化管理