vue之require.context(自动加载js模块等作用)

最新推荐文章于 2025-01-03 16:03:40 发布

Ynnelf

最新推荐文章于 2025-01-03 16:03:40 发布

阅读量557

点赞数

分类专栏：美女的vue奇幻漂流文章标签： javascript vue.js webpack

原文链接：https://blog.youkuaiyun.com/zyhzyh1120/article/details/108693045

版权

美女的vue奇幻漂流专栏收录该内容

4 篇文章

订阅专栏

require.context是webpack提供的一个功能，用于在指定目录下动态创建模块上下文。它接受目录路径、是否搜索子目录和匹配文件的正则表达式作为参数。通过返回的函数，可以获取到匹配的模块id、解析模块和获取默认导出。例如，可以遍历指定目录下的.js文件并存储其内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

require.context
初识 require.context
require.context是webpack中，用来创建自己的（模块）上下文

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

require.context函数接收三个参数：
1. 要搜索的文件夹目录
2. 是否还应该搜索它的子目录
3. 以及一个匹配文件的正则表达式

// 语法

require.context(directory, useSubdirectories = false, regExp = /^\.\//);

// 示例

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

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

通过打印, 可以看出返回的是一个函数，意思就是说，require.context模块导出（返回）一个（require）函数。
这个函数有三个属性：

resolve：是一个函数，它返回请求被解析后得到的模块 id。
keys：也是一个函数，它返回一个数组，由所有可能被上下文模块处理的请求组成。
id：是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到
调用 testFiles.keys() 可以打印出./test目录下所有test文件集合

const files = require.context('./modules', false, /\.js$/)
const modules = {}

files.keys().forEach(key => {
   modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default;
})
export default modules
// files(key).default  获取文件中使用default导出的内容。