【效率提升】配置文件的自动加载，强烈推荐！！！Hello，大家好，我是小羽同学，一个平凡而又不甘于平凡的前端开发工程师~

如果生活有奇迹，那一定是努力的轨迹！

Hello，大家好，我是小羽同学，一个平凡而又不甘于平凡的前端开发工程师~

emmm，大兄弟们，在做项目的时候又没有遇到过那种就是要引入整个文件夹下的所有文件。文件少的时候还好说，但项目大了，就很容易出现那种要引入10多20个文件的情况，这个时候一个一个文件的引入是最简单的方法，也是最烦人的方法。所以有没有什么好的解决方案呢？

小羽在开发SULG UI 组件库的时候也遇到了这个问题，咱们一起来看看小羽当时是怎么处理这个问题的~

1.require.context()

自动加载文件主要是使用了webpack中的require.context()，来动态引入文件。

来，咱们先看下require.context()到底是个啥子东西。

打开webpack的文档，搜索require.context，可以看到如下的内容。

可以通过 require.context() 函数来创建自己的 context。

可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录，以及一个匹配文件的正则表达式。

webpack 会在构建中解析代码中的 require.context() 。

语法如下：
require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
);
示例：
require.context('./test', false, /\.test\.js$/);
//（创建出）一个 context，其中文件来自 test 目录，request 以 `.test.js` 结尾。

2.获取文件夹下的所有文件

不想举栗子了，那就直接实战吧~

如SULG UI中的指令文件夹如下，那我们该怎么通过require.context()来获取所有的文件呢？

在index.js中，咱们写下如下的代码，然后打开控制台。可以看到已经成功获取到我们的文件路径。

let res = require.context('./modules', false, /^\.\/.*\.js$/)
console.log(res.keys())

3.注册自定义指令

vue中注册自定义指令的方式大概如下

Vue.directive('指令名称', {指令内容});

将指令注册和require.context()结合起来可以得到如下代码

import Vue from "vue"
Vue.use((Vue) => {
  ((requireContext) => {
    const arr = requireContext.keys().map(requireContext);
    (arr || []).forEach((directive) => {
      directive = directive.__esModule && directive.default ? directive.default : directive;
      Object.keys(directive).forEach((key) => {
        Vue.directive(key, directive[key]);
      });
    });
  })(require.context('./modules', false, /^\.\/.*\.js$/));
});