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()

版权属于：谁把年华错落成诗 所有，转载请注明出处！

本文链接：https://blog.pomears.com/archives/61.html

如果博客部分链接出现404，请留言或者联系博主修复。