码迷,mamicode.com
首页 > 其他好文 > 详细

require.context实现自动化导入文件

时间:2020-03-20 13:00:49      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:使用场景   ext   多个   http   技术   index   相对   default   参数表   

一、require.context是什么?

它是webpack的一个api,通过require.context函数获取一个特定的上下文,主要用来实现自动化导入模块。如果需要从一个文件夹中引入很多模块文件,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使我们不再需要写大量显式的import导入

 

二、使用场景

如有以下情况,从modules文件夹中加载多个模块文件,可以考虑使用require.context

技术图片

技术图片

 

 使用require.context遍历modules文件夹,取得需要的文件自动导入

 

三、require.context的语法使用

require.context 接受3个参数:

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

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

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

 

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

 

四、项目例子

 

技术图片

 

 

index.js内容如下:

技术图片

 

调用 require.context ( ‘ . ‘ , false , / \.js$ / ),会得到modules文件夹下5个文件的“执行环境”组成的数组 files

其中第一个参数表示相对于index.js文件的当前目录下;第二个参数表示不遍历文件的子目录;第三个参数是正则,匹配了与index.js文件同级的以 .js 结尾的文件

 

遍历 files.keys( ),每一个key是文件的名称(./index.js 、./networkHosp.js等五个文件),if判断如果是index.js文件本身,就return跳过循环操作,对剩下的4个文件通过 files(key).default拿到该模块的vue对象

 

为什么files(key)对象有default属性?

看一下除了index.js的其他4个文件的其中一个文件内容(4个文件都是相同操作),例如networkHosp.js文件内容:

技术图片

 

首先导入了自己的vue模板文件,再export default导出去,此时就产生了default属性,值是对应的vue对象

所以 files(‘./networkHosp.js’)得到的是该文件导出来的module模块,结构如下:

 

技术图片

 

files(‘./networkHosp.js’).default拿到vue对象后,我们可以Vue.component(files(key).default.name , files(key).default)全局注册该组件

这样的话,我们只要在vue项目的入口文件main.js中引入这个index.js,index.js在执行的过程中,解析同级文件夹下所有的 .js 后缀的文件,拿到每个js文件中导出的vue对象,并且注册为全局组件,只需要一个index.js中的几行代码,就可以自动化导入和注册组件,我们只要把想注册的组件文件放到index.js的同级下,代码就会自动去遍历和处理它,再也不用手动import组件,手动注册组件了。

 

五、其他应用场景

require.context另外一个常用的地方是svg图标,可以创建index.js,逻辑基本同上,然后直接把图标svg文件放到同级(下级也可以,注意require.context ( ‘ . ‘ , false , / \.js$ / )的第一个参数即可),使用时直接往文件夹里扔svg文件就可以,其他的注册交给代码。

技术图片

 

require.context实现自动化导入文件

标签:使用场景   ext   多个   http   技术   index   相对   default   参数表   

原文地址:https://www.cnblogs.com/Double-Zhang/p/12530849.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!