require.context是什么

一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块

什么时候需要用到require.context

当有重复的文件引入(如下代码),或者依赖项时,就可以使用require.context来做自动化引入


// -- index.js
// -- modules
//  +-- A.js
//  +-- B.js
//  +-- C.js
//  +-- D.js


// index.js
import A from 'modules/A'
import B from 'modules/B'
import C from 'modules/C'
import D from 'modules/D'
// ...

require.context

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

  • directory: 要查找的文件路径
  • useSubdirectories: 是否查找子目录
  • regExp: 要匹配文件的正则
  • mode:模式

例子:

require.context('./modules', true, /\.js$/)

require.context执行后,返回一个方法webpackContext,这个方法又返回一个__webpack_require__,这个__webpack_require__就相当于require或者import

返回的__webpack_require__具有三个属性:resolve, keys, id

  • resolve:一个函数,它返回已解析请求的模块id
  • keys:一个函数,返回__webpack_require__可以处理的所有可能请求的数组
  • id__webpack_require__的模块ID。 这对于module.hot.accept可能有用

引入文件例子

引入在modules文件夹下所有以js结尾的文件

// index.js
const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
    const value = modulesFiles(modulePath)
    modules[moduleName] = value.default
    return modules
}, {})

// modules
// {A: {…}, B: {…}, C: {…}, D: {…}}

参考文档

require-context
webpack中require.context的作用
使用require.context实现前端自动化
vue项目开发技巧(require.context)
require.context()

Last modification:February 20th, 2021 at 10:54 am
If you think my article is useful to you, please feel free to appreciate