介绍//通过require.context的方式引入指定的路径下匹配到的模块引用
const demoImgsContext=require.context (& # 39; @src/资产/一/演示# 39;,假的,/\ .webp/美元);
…//使用姿势
触发(类型){
this.demoImgs=Arry.from({长度:配置。类型},(关键字,值)=比;值+ 1)
. map(指数=比;demoImgsContext(’。/${类型}_demo ${指数}.webp '));
} //添加模块文件是,文件命请按照module_XXX的方式命名//自动引入模块文件夹下的js文件
const mutationContext=require.context(& # 39;。/模块# 39;,假的,/. * \ . js/);
const模块=mutationContext.keys ()。减少((上一页,cur)=比;{//排除module_root文件
const匹配=cur.match (/module_(? !。*根)(\ w + \ . js/);
const关键=比赛,,匹配[1];
关键,,(上一页[主要]=mutationContext(坏蛋).default);
返回上一页;
},{}); 地图(函数(e) {
返回y (“。/薄oncat (t,“_demo")。concat (e,“.webp"))
}) y=(“ae36"); ae36:函数(t, e, a) {//此处是一个地图映射,键值和真正的资源id的映射
var i={
“。/a_module_demo1.webp":“6085”;
“。/a_module_demo2.webp":“fd3b"
“。/b_module_demo1.webp":“cbf6"
“。/b_module_demo2.webp":“220 e"
“。/c_module_demo1.webp":“273 e"
“。/c_module_demo2.webp":“5 a5e"
“。/d_module_demo1.webp":“75 b0"
“。/d_module_demo2.webp":“2 d3e"
};//此处根据模块的id值,真正需要一个资源
函数r (t) {
var e=o (t);
返回一个(e)
}
函数o (t) {
var e=我[t];
如果(!(e + 1)) {
var=新的错误(“找不到模块& # 39;“+ t +“& # 39;“);
扔一个。代码=癕ODULE_NOT_FOUND",一个
}
返回e
}
r。键=function () {
返回种(我)
},r。解决=o、t。出口=r, r。id=癮e36"
}, 6085:函数(t, e) {
t。出口=?/${你配置的项目publicPath}/img/1 _module_demo1.ed6db768.webp"
},
小编给大家分享一下。上下文如何使用,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
场景需要我们引入某个指定文件夹下的所有webp格式的图片,在单击demo1的时候展示demo1下的x张案例图,在单击demoX的时候展示demoX下的x张案例图。
举一反三的场景还有需要的么?
比如vuex引入多个模块的商店。也可以使用这个方法。
接下来,让我们看一下,要求。上下文是如何做到动态引入资源的呢?
看下打包后的dist目录下,我们的静态图片案例块这个部分的代码是啥样的。
触发方法中引用模块资源的代码如下,对y方法进行调用,传入了一个资源的路径。
那y方法是什么呢?顺藤摸瓜,继续看下打包后的代码。
y方法是某个模块的出口,继续查看这个id下的模块代码:
“6085”,“fd3b"等地图映射的价值值可想而知,是真正的资源id值,其对应的模块映射如下:
当用户触发触发方法时,根据类型和指数指定的值,需要。背景存储的模块资源引用会根据关键值找到真正的资源模块,进行要求浏览器会帮助我们下载相应的资源,做到了批量引入后按需加载的想法。
看完了这篇文章,相信你对require.context如何使用有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
