初识require.context

require.context是webpack中,用来创建自己的(模块)上下文

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

require.context函数接收三个参数:

  • 要搜索的文件夹目录
  • 是否还应该搜索它的子目录
  • 以及一个匹配文件的正则表达式
// 语法
require.context(directory, useSubdirectories = false, regExp = /^\.\//);
// 示例
require.context('./test', false, /\.test\.js$/);
// (创建了)一个包含了 test 文件夹(不包含子目录)下面的、所有文件名以 `.test.js` 结尾的、能被 require 请求到的文件的上下文。

创建了一个包含了test文件夹(不包含子目录)下面的所有文件名以'.test.js'结尾的能被require请求到的文件上下文。

案例探索之继续深究

我们来结合一个例子看一下:

const files = require.context('./assets/images', false, /\.png$/);

文件目录结构如下: 

好不好奇上面的files究竟是个什么东西呢?有图有真相,我们打印一下:

files可以看到,是一个函数,意思就是说,require.context模块导出(返回)一个(require)函数。

这个函数有三个属性(没错又是3个,别忘了,函数也是对象,所以也是有属性的):

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

而且这个函数接收一个参数,一图胜千言

这个展示了webpack解析后的形成结果。可以看到,firequire.context()这个函数返回上下文模块就上面。上面也展示了files函数的三个属性是分别怎样形成的,files对应的就是上面的webpackContext。

我们试着调用一下files.keys()

返回一个数组,从上面的keys方法就可以看到,合理对应当前结果。

vue中使用场景

在vue中,我们对于一些基础组件,可以使用require.context()函数来创建上下文模块,然后进行全局注册组件,记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。具体查看vue官方示例基础组件的自动化全局注册

参考文献

https://juejin.im/post/5ab8bcdb6fb9a028b77acdbd

https://webpack.docschina.org/guides/dependency-management/

 

Logo

前往低代码交流专区

更多推荐