vue 加载目录下所有文件

相信各位小伙伴在开发vue项目的时候一定遇到过 在编写一个组件的时候，需要引入某一个目录下的所有组件

像图片所示的这种情况，大家可能会选择创建一个js文件用下面的方式中转一下，如：


这样看起来并无大碍，但是这样组件少的情况还好，组件一旦多了起来，每当创建一个新的组件，就要去维护一次这个中转的js文件，一次次的重复劳动，对于项目的编写者和维护者来说，将会是一场巨大的灾难

那有没有什么解决办法 去告别上边说的这种情况呢？

这个时候就该请主角webpack上场了

webpack给咱们提供了一个非常好用的Api，是什么呢？

require.context

简单的介绍一下 ：
webpack 的 require.context 可以为咱们创建一个上下文，它允许传递要搜索的目录，指示是否也应搜索子目录的标志以及用于匹配文件的正则表达式。require.context()在构建时，webpack 会在代码中进行解析。

现在咱们来看一下 怎么用require.context 改变一下上边的代码，首先咱们得清楚require.context 有哪些属性：

• keys 返回一个以require.context匹配文件的路径和文件名组成的数组
• resolve 传入keys数组中的元素 会返回该模块
• id 这里咱们用不到 不以赘述

定义一个importAll 函数，用于引入全部模块，并在中转文件中使用该函数

// components/goods/index.js
import { importAll } from '@/utils'
export default importAll(require.context('./', false, /\.vue$/))

// utils.js
function importAll(r) {
    let __modules = {}
    r.keys().forEach(key => {
        let m = r(key).default
        let n = m.name;
        __modules[n] = m
    });
    return __modules
}

这样咱们在使用goods目录下组件的时候就不用一个一个的手动引入导出了，新建组件也不必在去维护那个中转文件了，写一次忘掉它的存在就好了

<template>
	<GoodsLoading>
		<GoodsSearch/>
		<GoodsTable>
			<GoodsCard/>
			<GoodsCard/>
			<GoodsCard/>
		</GoodsTable>
	</GoodsLoading>
</template>
<script>
import Goods from '@/component/goods'
export default {
	components: {
	    GoodsCard: Goods.GoodsCard,
	    GoodsLoading: Goods.GoodsLoading,
	    GoodsSearch: Goods.GoodsSearch,
	    GoodsTable: Goods.GoodsTable
  	}
}	
</script>

当然了 这个方法不止适用与Vue的项目中， 用webpack构建的项目都可以使用这个办法去提高开发效率，告别重复劳动 。