前端自动化require.context的使用

在日常开发过程中，当需要多次引用模块的时候

import A from 'components/A'
import B from 'components/B'
import C from 'components/C'
import D from 'components/D'

上述这样写显得很麻烦，需要一个个去写，比较麻烦，前端自动化require.context可以帮助我们简化。

require.context需要传入3个参数

require.context(directory, useSubdirectories, regExp)

（1）directory：文件路径
（2）useSubdirectories：是否查找子目录（布尔值：true/false）
（3）regExp：正则校验，用来匹配文件格式

比如：
下列代码的意思是：引入views下的子js文件

const constantFiles = require.context('./views', true, /\.js$/)

constantFiles是一个函数，通过

constantFiles.keys()

可以得到所要引入的文件相对于directory的位置，这是constantFiles.keys()的返回值，是一个数组

调用constantFiles（所要引入的文件相对于directory的位置）就可以得到其他文件导出的内容：

核心代码：
（1）constantFiles.keys()
（2）constantFiles(key)

const constantFiles = require.context('./views', true, /\.js$/)
let constantModules: Array<any> = []
**constantFiles.keys()**.forEach((key) => {
  console.log(key)
  console.log(constantFiles(key))
  constantModules.push(**constantFiles(key)**.map)
})


console.log(constantFiles)
console.log(constantModules)
console.log(constantFiles.keys())

参考文章：https://zhuanlan.zhihu.com/p/59564277