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);
});

 

你可能感兴趣的:(vue,js,webpack,前端)