require.context实现前端工程化

2022-01-12 11:31:40 阅读：124 来源： 互联网

一、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个属性

resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
keys {Function} -返回匹配成功模块的名字组成的数组
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.自定义指令模块化管理

标签：文件,vue,require,文件夹,context,组件,工程化
来源： https://www.cnblogs.com/qiaozhiming123/p/15791783.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

require.context实现前端工程化