小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
本文同时参与「掘力星计划」，赢取创作大礼包，挑战创作激励金
前言
小伙伴们大家好，在上一篇文章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实现了一个简单的全局组件批量自动注册功能。 关于全局批量注册组件的两个小技巧我们就分享完了，任何问题欢迎留言指正。 喜欢的小伙伴欢迎点赞留言加关注哦！
