require.context()使用方法及项目实战

require.context 

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

equire.context()是可以用来创建自己（模块）上下文的方法，有3个参数：

可以给这个函数传入四个参数：

directory：要搜索的文件夹目录

useSubdirectories：是否还应该搜索它的子目录

regExp：一个匹配文件的正则表达式

mode：是否异步加载

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

语法如下：

require.context( directory, (useSubdirectories = true), (regExp = /^\.\/.*$/), (mode = 'sync'));

示例：

require.context('./test', false, /\.test\.js$/);
//（创建出）一个 context，其中文件来自 test 目录，request 以 `.test.js` 结尾。

require.context('../', true, /\.stories\.js$/);
// （创建出）一个 context，其中所有文件都来自父文件夹及其所有子级文件夹，request 以 `.stories.js` 结尾。

关于require.context的返回值：一个函数

这个函数可以接收一个参数：request，这个request是指在require()语句中的表达式，直接调用该方法可以得到对应模块； 另外，函数也是对象，该函数有3个属性： resolve, keys, id。

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

如果想引入一个文件夹下面的所有文件，或者引入能匹配一个正则表达式的所有文件，这个功能就会很有帮助，例如：

function importAll(r) {
  r.keys().forEach(r);
}

importAll(require.context('../components/', true, /\.js$/));

const cache = {};

function importAll(r) {
  r.keys().forEach((key) => (cache[key] = r(key)));
}

importAll(require.context('../components/', true, /\.js$/));
// 在构建时(build-time)，所有被 require 的模块都会被填充到 cache 对象中。

在项目中实践：

1、引入当前文件夹下所有的 zh.js

const zh = require.context('./', true, /zh.js$/);
const requireAll = zh.keys().map(zh);
const i18n = {
}
//将当前获得的数据通过遍历的方法与 i18n 合并  并导出
for (const item of requireAll) {
  i18n[item.default.name] = item.default;
}
export default i18n;

2、引入当前文件夹下所有的 以  . vue结尾的文件  并注册

import Vue from 'vue';
const req = require.context('./', true, /\.vue$/);

const requireAll = context => context.keys().map(context);
requireAll(req).forEach(({ default: item }) => {
  console.log(item);
  Vue.component(item.name, item);
});