使用require.context实现前端工程自动化

require.context是什么

一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块。

require.context函数接受三个参数

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

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

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

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

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

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

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

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

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

require.context另外一个常用的地方是svg图标,可以不用每次导入图标文件,相对于以前的iconfont,svg有很多好处强烈推荐,详情可以看这个

手摸手，带你优雅的使用 icon ：juejin.im/post/59bb86…

可以使用 require.context 只全局注册这些非常通用的基础组件。 cn.vuejs.org/v2/guide/co…

作者：心_c2a2 链接：www.jianshu.com/p/c894ea00d… 来源：简书 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

转载于:https://juejin.im/post/5d0304a2e51d451063431802