基於 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>