欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack之require.context

程序员文章站 2022-07-14 20:32:49
...

require.context

官方文档指出
It allows you to pass in a directory to search, a flag indicating whether subdirectories should be searched too, and a regular expression to match files against.

意思是它允许你通过一个目录进行搜索,flag指定是否搜索子目录,以及与文件匹配的正则表达式。

也就是说 require.context 有三个参数:

  • directory:说明需要检索的目录
  • useSubdirectories:是否检索子目录
  • regExp: 匹配文件的正则表达式

examples:

require.context('./test', false, /\.test\.js$/);

context module API

官方文档指出
A context module exports a (require) function that takes one argument: the request.
The exported function has 3 properties: resolve, keys, id.
resolve is a function and returns the module id of the parsed request.
keys is a function that returns an array of all possible requests that the context module can handle.
id is the module id of the context module. This may be useful for module.hot.accept

意思是该上下文到处一个必须的函数,并且这个函数接受一个请求的参数.
导出的函数有3个属性:resolve、keys和id.

  • resolve是一个函数,返回解析请求的模块ID。
  • keys是一个函数,返回上下文模块可以处理的所有可能请求的数组.
  • id是上下文模块的模块ID。 这可能对module.hot.accept有用
var cache = {};

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

importAll(require.context('../components/', true, /\.js$/));
例如导出当前目录文件下的所有js文件并且不包含该index.js文件

首先创建两个测试文件index.js和test.js

//index.js

var cache = {};

function importAll (r) {
  r.keys().forEach(key => {
    if(key === './index.js') return
    cache[key] = r(key).defalut
  });
}

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

console.log(cache) //可以看下cache现在是什么样子
export default cache