记录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

复制代码

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值