webpack的require.context()用法

参数

require.context(directory, useSubdirectories, regExp)

参数 说明
directory 检索的目录
useSubdirectories 是否检索子文件夹
regExp 匹配文件的正则表达式

用法1:

以文件名作为对象键

// 检索 ./modules 下面所有的 .js 文件
const modulesFiles = require.context('./modules', true, /\.js$/)
// reduce 处理
const modules = modulesFiles.keys().reduce((res, cur) => {
  // 获取文件名
  const name = cur.replace(/^\.\/(.*)\.\w+$/, '$1')
  // 获取 export default 或 export
  const value = modulesFiles(cur)
  // 以文件名为键,新增属性
  res[name] = value.default || value
  return res
}, {})
console.log('modules:', modules)
export default modules

用法2:

export default 默认导出就以文件名作为对象键,否则就用 export 导出的对象名

// 检索 ./modules 下面所有的 .js 文件
const modulesFiles = require.context('./modules', true, /\.js$/)
// reduce 处理
const modules = modulesFiles.keys().reduce((res, cur) => {
  // 读取 export
  const value = modulesFiles(cur)
  // 判断是否 export default
  if (value.default) {
    const name = cur.replace(/^\.\/(.*)\.\w+$/, '$1')
    res[name] = value.default
  } else res = { ...res, ...value }
  return res
}, {})
console.log('modules', modules)
export default modules

详细用法可参考:require.context()的用法详解_白嫖leader的博客-CSDN博客

猜你喜欢

转载自blog.csdn.net/qq_41579327/article/details/130153987