记录require.context()使用方法及项目实战

require.context() 是什么

require.context(directory, useSubdirectories = false, regExp = /^\.\//)
复制代码

require.context()是可以用来创建自己（模块）上下文的方法，有3个参数：

• directory：要搜索的文件夹目录
• useSubdirectories：是否还应该搜索它的子目录
• regExp：一个匹配文件的正则表达式

//（创建了）一个包含了 test 文件夹（不包含子目录）下面的、所有文件名以 `.test.js` 结尾的、能被 require 请求到的文件的上下文。
require.context("./test", false, /\.test\.js$/);
 
//（创建了）一个包含了父级文件夹（包含子目录）下面，所有文件名以 `.stories.js` 结尾的文件的上下文。
require.context("../", true, /\.stories\.js$/);

复制代码

关于require.context的返回值：一个函数

这个函数可以接收一个参数：request，这个request是指在require()语句中的表达式，直接调用该方法可以得到对应模块； 另外，函数也是对象，该函数有3个属性： resolve, keys, id。

• resolve：是一个函数，它返回请求被解析后得到的模块 id。
• keys：也是一个函数，它返回一个数组，由所有可能被上下文模块处理的请求组成。
• id：是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

项目中使用

（又要去赶项目了，先把用法记录下来）

如在vue项目中的store/modules下有多个模块

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

// 要跳过的模块
const excludes = ['index', 'base']
const modules = context.keys().reduce((m, k) => {
  const name = k.slice(2, -3)
  if (!excludes.includes(name)) {
    m[name] = context(k).default
  }
  return m
}, {})

export default modules

复制代码

注意

由于自己学艺不精，对于这个require学习不到位，导致后来在用mpvue做小程序项目的时候碰壁了，同样是上面这段代码，在基于mpvue的项目中却一直报 require.context is not a function，具体原因现在不明白，猜测应该是webpack的问题，正在学习，有知道的大神可以指教下。

临时找了个解决方法：安装require-context这个依赖，然后代码修改如下：

const requireContext = require('require-context')
const path = require('path')

const context = requireContext(path.join(__dirname, './routes'), false, /\.js$/)
const routes = context.keys().reduce((rt, k) => {
  rt = rt.concat(context(k))
  return rt
}, [])
module.exports = routes

复制代码

这里是想把路由文件统一加载进来，用法跟加载路由一样。