vue-cli require-context

 

这里只是记录下：

require-context(directory, true/false, reg) 功能类似于 require-directory。

有三个参数：

要搜索的目录、一个标记表示是否搜索其子目录、创建一个匹配文件的正则表达式，webpack 会在构建中解析代码中的 require.context() 。

语法如下：

const moduleContext = require.context(directory, true, /\.*$/)

一个常用的属性：

moduleContext.keys( )

const moduleContext = require.context() // 会导出一个函数
moduleContext.keys() // 返回一个数组，装有所有模块的路径 ['./user.js', './userInfo.js', './d/d.js']

一个常用方法：

moduleContext（），导出的这个函数，接收一个文件路径参数，返回其对应的模块, 相当于require( )导入：

const userModule = moduleContext('./user.js')

小试一下：

modue目录：

module
│
└───d
│   │  d.js
|
|user.js
|userInfo.js

 需求：返回一个 键为文件名，值为模块的对象 { fileName1: Module1, fileName2: Module2 }

// module目录下的文件user.js、d/d.js、userInfo.js
let path = require("path")
// console.log(path.basename('./a/b/user.js', '.js')) // 输出 user

const moduleCtx = require.context('./module', true, /\.js$/)
console.log(moduleCtx.keys())
const modules = moduleCtx.keys().reduce((genModule, modulePath) => {
  // 方式一：自己写正则来获取文件名，但是如果存在嵌套文件，最后生成的moduleName为：x/x/x,不太好看
  let moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  // 方式二：使用path模块来获取文件名，必须指定下边2个参数
  // let moduleName = path.basename(modulePath, '.js')
  let moduleValue = moduleCtx(modulePath) // 返回模块的内容
  // 这里要注意：取出来的模块内容是在一个对象里，下边我们通过default来取模块，是因为
  // module文件夹下的所有模块的导出方式是：export default默认导出，***这块也必须统一***
  // 如果exports导出，最后不会获取到对应的模块！！！因为exports导出需要使用指定的名称获取模块
  genModule[moduleName] = moduleValue.default || {}
  return genModule
}, {})

最后打印：