基于 webpack 的require.context来实现自动加载组件并注册的全局的功能

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

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

require.context() 方法来创建自己的（模块）上下文，这个方法有 3 个参数：

•  你要引入文件的目录
•  是否要查找该目录下的子级目录
•  匹配要引入的文件

require.context模块导出（返回）一个（require）函数，这个函数可以接收一个参数：request 函数–这里的 request 应该是指在 require() 语句中的表达式

导出的方法有 3 个属性： resolve, keys, id。

resolve 是一个函数，它返回请求被解析后得到的模块 id。
keys 也是一个函数，它返回一个数组，该数组是由所有可能被上下文模块解析的请求对象组成
id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到
 

在存放公共组件的文件夹中新建一个index.js文件

index.js代码

import Vue from 'vue'
//自动导入components文件夹中的index1.vue文件
const componentsContext = require.context('@/components/', true, /index1.vue/)
console.log(componentsContext)
componentsContext.keys().forEach(component => {
    // 获取文件中的 default 模块
    const componentConfig = componentsContext(component)
    /**
    * 兼容 import export 和 require module.export 两种规范
    * // 如果这个组件选项是通过 `export default` 导出的，
      // 那么就会优先使用 `.default`，
      // 否则回退到使用模块的根。
    */
    const ctrl = componentConfig.default || componentConfig
    console.log(componentConfig)
    const a = 'csg-' + ctrl.name//（csg-）是添加统一的否根（可以不使用）。
    const b = ctrl
    Vue.component(a, b)
})

 在main.js中引入components文件夹中的index.js文件

import '@/components/index.js'

这样就成功的把components文件夹中的公共组件全局注册成功了

在.vue中引入的例子

<template>
    <div id="app1">
      <!-- //此处监听了两个事件，可以在B组件或者C组件中直接触发 -->
        <child1 :child1.sync="child1" :p-child2.sync="child2" v-on:test1="onTest1"  v-on:test2="onTest2">
        </child1>
        <div>1111</div>
        <csg-lxcomponents
        ></csg-lxcomponents>
        <div>lxccv</div>
        <csg-lxccv></csg-lxccv>
    </div>
</template>
<script>
import child1 from './child1.vue';
export default {
    data() {
        return {
          child1:'1',
          child2:2
        };
    },
    components: { child1:child1 },
    methods: {
        onTest1() {
            console.log('test1 running...');
        },
        onTest2() {
            console.log('test2 running');
        }
    }
};
</script>