登录  /  注册
首页 > web前端 > js教程 > 正文

require.context的用法介绍(附示例)

不言
发布: 2019-03-26 09:46:54
转载
4806人浏览过

本篇文章给大家带来的内容是关于require.context的用法介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

起因:为什么会突然用到webpack这个管理特性呢?

项目某个页面需要引入n张demo图片。即资源的批量引入:如果要引入10+个以上的图片资源,就需要写10+个如下的引入代码:import xxx from 'relative/path/assets/imgs/xxx';,那如果再多一点的静态资源需要引入呢?这时候require.context就派上了用场。

文档

官方文档的介绍先放在这里,可小觑一下,了解使用姿势。

栗子来一个

话不多说,针对上面的场景,我们上一下代码吧。

场景需要我们引入某个指定文件夹下的所有webp格式的图片,在单击demo1的时候展示demo1下的x张案例图,在单击demoX的时候展示demoX下的x张案例图。

    // 通过require.context的方式引入指定的路径下匹配到的模块引用
    const demoImgsContext = require.context('@src/assets/imgs/demo', false, /\.webp$/);
    ...
    // 使用姿势
    trigger(type) {
        this.demoImgs = Arry.from({length: config.type}, (key, value) => value + 1)
            .map(index => demoImgsContext(`./${type}_demo${index}.webp`));
    }
登录后复制

举一反三的场景还有需要的么?
比如vuex引入多个module的store。也可以使用这个方法。

    // 添加module文件是,文件命请按照module_XXX的方式命名
    // 自动引入module文件夹下的js文件
    const mutationContext = require.context('./module', false, /.*\.js/);
    const modules = mutationContext.keys().reduce((prev, cur) => {
        // 排除module_root文件
        const matches = cur.match(/module_(?!.*root)(\w+)\.js/);
        const key = matches && matches[1];
        key && (prev[key] = mutationContext(cur).default);
        return prev;
    }, {});
登录后复制

接下来,让我们看一下,require.context是如何做到动态引入资源的呢?

看下打包后的dist目录下,我们的静态图片案例chunk这个部分的代码是啥样的。

trigger方法中引用模块资源的代码如下,对y方法进行调用,传入了一个资源的路径。

    map(function (e) {
        return y("./".concat(t, "_demo").concat(e, ".webp"))
    })
登录后复制

那y方法是什么呢?顺藤摸瓜,继续看下打包后的代码。

   y = a("ae36");
登录后复制

y方法是某个模块的export,继续查看这个id下的模块代码:

ae36: function (t, e, a) {
      // 此处是一个map映射,key值和真正的资源id的映射
      var i = {
        "./a_module_demo1.webp": "6085",
        "./a_module_demo2.webp": "fd3b",
        "./b_module_demo1.webp": "cbf6",
        "./b_module_demo2.webp": "220e",
        "./c_module_demo1.webp": "273e",
        "./c_module_demo2.webp": "5a5e",
        "./d_module_demo1.webp": "75b0",
        "./d_module_demo2.webp": "2d3e"
      };
      // 此处根据module的id值,真正require一个资源
      function r(t) {
        var e = o(t);
        return a(e)
      }
      
      function o(t) {
        var e = i[t];
        if (!(e + 1)) {
          var a = new Error("Cannot find module '" + t + "'");
          throw a.code = "MODULE_NOT_FOUND", a
        }
        return e
      }
      r.keys = function () {
        return Object.keys(i)
      }, r.resolve = o, t.exports = r, r.id = "ae36"
    },
登录后复制

"6085","fd3b"等map映射的value值可想而知,是真正的资源id值,其对应的模块映射如下:

6085: function (t, e) {
      t.exports =
        "//${你配置的项目publicPath}/img/1_module_demo1.ed6db768.webp"
    },
登录后复制

当用户触发trigger方法时,根据type和index指定的值,require.context存储的模块资源引用会根据key值找到真正的资源模块,进行require,浏览器会帮助我们下载相应的资源,做到了批量引入后按需加载的想法。

本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目!

以上就是require.context的用法介绍(附示例)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:segmentfault网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号