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

墨蓝 2022-09-15 11:54 223阅读 0赞

### 前言 ###

> 小伙伴们大家好，在上一篇文章[Vue中两个让你幸福感爆棚的组件导入小技巧之循环代替Ctrl C/V（独家总结）][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个属性（函数也是对象，也有自己对应的属性）
>     
>     1.  resolve：函数，接收一个参数req，req为指定文件夹下面匹配文件的相对路径
>     2.  keys ：函数，没有参数，返回匹配到的文件名（模块名）组成的数组
>     3.  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_Ctrl C_V]: https://blog.csdn.net/lixiaosenlin/article/details/120673405