Vue中两个让你幸福感爆棚的组件导入小技巧之require.context

前言

小伙伴们大家好，在上一篇文章Vue中两个让你幸福感爆棚的组件导入小技巧之循环代替Ctrl C/V（独家总结）中我们已经学习了一个注册全局组件的小技巧，使得我们在注册大量全局组件时不再被Vue.use或Vue.component所霸屏。不知道小伙伴们看了以后幸福感有没有提升呢，如果觉得还不过瘾，那么接下来的这个连import都可以省略的小技巧会不会让你怦然心动呢？
我们今天要分享的是一个webpack为我们提供的能够获取特定上下文的api函数require.context。

require.context

作用： 上面已经提到require.context是webpack中的一个能够获取特定上下文的api，它主要用来实现自动化导入模块，即不再需要手写import导入。

使用场景： 在前端工程中如果有这样一种场景：需要从一个文件夹及其子文件夹中引入较多的模块时，可以考虑使用这个api，它会自动遍历文件夹及其子文件夹中指定的文件，然后自动导入，不再需要每次显式的调用import导入了，听起来是不是有点心动了。

语法分析： require.context(directory, useSubdirectories = false, regExp = /^.//)。该函数接收3个参数
directory：string类型，要导入的模块所在的路径

useSubdirectories：boolean类型，标识是否需要遍历子目录

regExp：匹配文件对应的正则

返回值： 该函数执行后的返回值依然是一个函数，并且这个函数（返回值）还带有3个属性（函数也是对象，也有自己对应的属性）
resolve：函数，接收一个参数req，req为指定文件夹下面匹配文件的相对路径

keys ：函数，没有参数，返回匹配到的文件名（模块名）组成的数组

id：字符串，-执行环境的id

返回值的返回值： 返回值的返回值就是我们要导入的模块信息。有点绕，比如我们调用require.context()时返回值是requireComponent，上面说到requireComponent也是一个函数，当我们再执行这个函数requireComponent时，它的返回值就是我们想要的模块信息了。

自动模块导入思路分析

上面我们已经介绍了关于require.context的用途、使用场景及语法分析。下面我们就来介绍一下如果使用该函数实现模块的自动化导入。

注意：该函数只适用于批量导入一个文件夹及子文件夹下的多个文件，不适合导入分散在不同文件夹下的文件。

首先我们需要调用require.context函数，并配置好相应的参数（文件路径，是否遍历字目录，匹配正则），并接收返回值requireComponent

调用requireComponent的keys函数，并遍历其返回值

在循环体内执行requireComponent函数，并将遍历值作为参数传递给该函数，同时接收该函数的返回值comp（comp就是我们要导入的模块对象）

调用Vue.component进行全局组件注册

代码实现

const requireComponent = require.context('./components',true, /.vue$/)//导入components目录及子目录下所有.vue文件
//遍历匹配的到模块
requireComponent.keys().forEach(moduleName =>{const module = requireComponent(moduleName);Vue.component(module.default.name, module.default);
});

以上简单的几行代码便实现了批量组件的全局注册，小伙伴们看完后有没有怦然心动，有没有满满的幸福感呢。

总结

本文我们首先引入了webpack中的require.context，并且详细的分析了require.context作用及用法，最后还利用require.context实现了一个简单的全局组件批量自动注册功能。
关于全局批量注册组件的两个小技巧我们就分享完了，任何问题欢迎留言指正。
喜欢的小伙伴欢迎点赞留言加关注哦！

Vue中两个让你幸福感爆棚的组件导入小技巧之require.context相关推荐

Vue中两个让你幸福感爆棚的组件导入小技巧之循环代替Ctrl C/V（独家总结）
前言小伙伴们大家好,今天要跟大家分享的是能够提升幸福感的关于组件导入的两个小技巧.做前端开发的小伙伴都知道,当前前端中有两大流行的框架Vue和React.而现在的前端开发中大部分公司用的也都是这两大 ...
Element组件引发的Vue中mixins使用，写出高复用组件
我们都知道 Vue 采用的是一种组件化开发模式,组件在 Vue 中一个非常重要的核心概念.每个组件都是一个完整的实例,组件的创建,组件间的通讯,组件如何更好的复用,以及整个的生命周期的钩子.所以你会发 ...
python 输出文字_Python中输出ASCII大文字、艺术字、字符字小技巧
复制代码代码如下: display text in large ASCII art fonts 显示大ASCII艺术字体这种东西在源码声明或者软件初始化控制台打印时候很有用. 例如下图: 这是查看 ...
Vue中怎样封装与使用公共状态属性组件实现类似枚举类的效果
场景如果一个状态量在多个地方用到,或者一个业务用到多个状态量. 可以使用类似枚举类代替直接使用明文表示. 这样如果需要修改状态量的值就不用再每个地方都要修改. Vue中要实现同样的效果,比如自定义一 ...
vue中mixin 感觉很牛逼（父子组件融合成一个新组件）
vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引 ...
【Vue+Echarts】Vue中Echarts图表的使用（三）—— 组件模块调用不同类型的Echarts图表（动态图表生成）
这节也是这个系列最后的一篇文章了. 第二篇文章,将Echarts封装成了组件,在使用的时候,只需将ChartsOption传递进去即可,同时,提供了监听事件,当Option发生变化时,会刷新图表. 因 ...
vue中使用kindeditor编辑器_vue富文本编辑器组件vue-quill-edit使用教程
这篇文章主要为大家详细介绍了vue富文本编辑器组件vue-quill-edit使用教程,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 之前使用的 ...
vue 中引入阿里图标库，封装iconPicker组件
一.引入阿里图标库 1.vue项目引入阿里图标库二.封装iconPicker组件 1.子组件 <template><el-popoverplacement="bottom ...
winform在表格中输入一个完整的时间字段_【ArcGIS小技巧视频教程】（5）:在ArcGIS中挂接其他数据...
我们在制图的过程中可能会遇到这样的问题:我们在拿到一幅地图和一些表格数据,我们想把表格数据附属到地图上,并进行渲染显示.今天我们就分享一下如何将一些外接的表格数据,挂接到已有地图的属性表上,文末附视 ...

Vue中两个让你幸福感爆棚的组件导入小技巧之require.context

前言

require.context

自动模块导入思路分析

代码实现

总结

Vue中两个让你幸福感爆棚的组件导入小技巧之require.context相关推荐

最新文章

热门文章