vue开发中的技巧，模块自动化引入

在开发VUE 工程项目的时候， 咱们一般会遇到一个场景，就是一个文件引入了 不一样的模块 。

例如，我如今的项目，compoents文件夹下 是我全局的公共组件。

咱们一般可能会在main.js（我是在compoents建立了 一个export.js ，做为我所有公共组件的导出的文件,而后在main.js引入exprot文件） 依次的导入 compents文件夹下的组件 , 再将组件 注册到Vue全局组件上。

例如：

这样写起来是能够的。可是每次增长一个全局组件，就须要在这里从新引入一遍，仍是比较麻烦的。并且感受很不灵活。那我们有没有其余的方法呢？固然是有的了。

那么下面给你们分享一个webpack的提供的api。require.context()函数。学会了终身受益阿，哈哈哈。

那么我先给你们介绍一下这个函数。

这个函数呢， 能帮咱们帮咱们获取一个模块的上下文。

它一共接收三个参数 : 

@params  [ directory ]  { String } - 要读取文件的路径

@params [ useSubdirectories ] { Boolean } - 是否查找子目录

@params [ re ] [ RegExp ] - 匹配文件的正则表达式

用法：const file = reqire.context('@/components/',true,/index\.vue$/)

表明我要读取 compoents文件夹下 结尾是index.vue的文件 而且查找文件夹的子目录 

这个方法，又返回一个函数，而且这个函数有三个属性。（注意函数也是对象 是能够随意扩展属性的，日常咱们遇到比较多的多是返回个对象 对象有一些属性，可是file是能够执行的函数 而且这个函数是个关键奥）

先说一下返回的file 函数的三个属性。

@return [ keys ] { Function } 返回的是一个数组。数组存放的 我理解是 匹配文件的相对路径。

@return [ resolve ] { function } 接收一个参数 是String类型，参数是keys()数组返回的某一个文件的相对路径 。例如file.resolve(file.keys()[0]) ，这个函数 返回一个字符串 是相对于整个工程的相对路径。

@return [ id ] 执行环境的id,返回的是一个字符串。

我给你们打印出来看看，

如今再说一下file函数 ， file函数 接收的参数 是String类型， 跟file.resolve方法接收参数同样。

是匹配文件的相对路径，而且包含在file.keys()数组内。

咱们在看一下执行 file函数 返回的结果 

file(file.keys([0]));

是一个Module对象，Module对象下 又一个default属性 ， 这个属性就是咱们这个组件的引用了。至关于 咱们 import nfList from './components/nf-list/index.vue' 中的 nfList 对象。

如今拿到了这些数据 ，咱们来愉快的优化一下export.js文件中的代码 。

如今只用6行代码， 就帮咱们完成了全局组件的自动注册 ， componets文件下的组件自动查找。不再用咱们一个个的improt了 。代码是否是一会儿变得简洁很多啦。

固然还有不少地方能够 改造 ， 比咱们的路由 拆分，指令拆分 ， 还有vuex中的module引用 ， 均可以用这个动态的自动化导入模块。

第一次分享，可能有不少地方写的不太好，请你们多多指点，共同窗习哈～～