首页 > 其他 > 详细

require.context/

时间:2021-07-19 22:46:51      阅读:19      评论:0      收藏:0      [点我收藏+]

 

require.context是什么

一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,

在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,

然后自动导入,使得不需要每次显式的调用import导入模块

分析require.context

require.context函数接受三个参数

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

  2. useSubdirectories {Boolean} -是否遍历文件的子目录

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

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

自己写的案例(vue路由引入)

let modules=require.context(‘../router‘, false, /\.js$/)
let routes=[];//所有的路由
modules.keys().forEach(val => {
    if(val.indexOf(‘index.js‘)==-1){
        routes=routes.concat(modules(val).default);
    }
});

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

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

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

  3. id {String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept,应该是热加载?

这三个都是作为函数的属性(注意是作为函数的属性,函数也是对象,有对应的属性)

技术分享图片

 

 

 

require.context/

原文:https://www.cnblogs.com/renhj1996/p/15031254.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!