What
require.context是什么？
- 这是 webpack 里面用于管理依赖
dependency-management，用来自动导入模块(组件、图片等，这里用组件来举例)
使用目的
当前组件的数量少，可以使用 Vue.component()(如何注册插件) 逐个去注册，但是数量多的话就成了比较繁琐的事情了。
所以这就是 webpack 的 require.context 用武之处，批量注册组件。
实例演示
封装了两个组件，想将它们注册为vue全局组件。
封装组件目录
组件的内容：
-
Button组件
-
Scroll组件
工具函数
封装了vue全局注册组件的函数 (文件名应该是utils，出错了...)
export default {
// install函数接收两个参数，第一个为 Vue构造器，第二个为可选的选项对象options
install(Vue) {
// webpack的一个函数，返回模块上下文函数，接收三个参数：搜索文件目录，是否搜索其子目录，匹配文件名的正则表达式
const requireComponents = require.context('../packages', true, /\.vue$/)
console.log(requireComponents)
console.log(requireComponents.keys())
// keys() 方法，它返回上下文模块可以处理的所有可能请求的数组
requireComponents.keys().forEach(name => {
// 我的理解为进一步解析当前文件里的内容
const componentConfig = requireComponents(name)
console.log(componentConfig)
// 提取组件名
const componentName = componentConfig.default.name
console.log(componentName)
// 注册组件
if (componentName) {
Vue.component(componentName, componentConfig.default || componentConfig)
}
})
}
}
console.log(requireComponents)打印结果
打印结果为一个函数，并且返回一个 webpackContext 方法,并且有三个属性，resolve方法，
keys方法，id 属性。
其中 keys 方法返回的是 map 集合的键名(Object.keys 方法)
console.log(requireComponents.keys())
打印结果为一个数组，其值为组件文件的相对地址
console.log(componentConfig)和console.log(componentName)
获得组件名后便可注册组件。
Vue.component(componentName, componentConfig.default || componentConfig)
使用组件
在入口文件直接导入 global.js 文件，再通过 Vue.use(global) 使用插件，这样就可以直接在组件中使用了。
import global from '@/untils/global'
// 使用自己封装的插件
Vue.use(global)
总结
require.context 用法就是 遍历目录文件，获取组件名通过循环实现组件全局注册。
参考文章：
