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

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导出的内容。

猜你喜欢

转载自blog.csdn.net/qq_44342031/article/details/128633977
今日推荐