require.context在vue项目的使用

适用于划分各个模块，而各个模块要一个一个引入，太麻烦了，这是就用到了require.context
require.context函数接受三个参数：

1. directory {String} -读取文件的路径
2. useSubdirectories {Boolean} -是否遍历文件的子目录
3. regExp {RegExp} -匹配文件的正则

语法: require.context(directory, useSubdirectories = false, regExp = /^.//);
//项目中引用
const modulesFiles = require.context('./modules', true, /\.js$/)

目录结构

require.context函数执行后返回的是一个函数,并且这个函数有3个属性

1. resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
2. keys {Function} -返回匹配成功模块的名字组成的数组
3. id {String} -执行环境的id,返回的是一个字符串

const modulesFiles = require.context('./modules', true, /\.js$/)
console.dir(modulesFiles);
console.log("keys",modulesFiles.keys());
console.log("resolve",modulesFiles.resolve(modulesFiles.keys()[0]));
console.log("id",modulesFiles.id);

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules1 = modulesFiles.keys().reduce((modules, modulePath) => {
  const value = modulesFiles(modulePath)
  modules.push(value.default)
  return modules
}, [])
//reduce callback函数第一个参数是上一次回调函数的返回值，或者提供的初始值（initialValue）
//callback函数第二个参数是当前正在处理的元素
//reduce方法第二个参数写的是[]，modules就是数组。
//reduce方法第二个参数写的是{}，modules就是对象。
console.log(modules);

import componentsRouter from ‘./modules/components’
import chartsRouter from ‘./modules/charts’
import tableRouter from ‘./modules/table’
import nestedRouter from ‘./modules/nested’
一开始准备导入的路由

  ...modules,//三点解构使用即可
  {
    path: '/example',
    component: Layout,
    redirect: '/example/list',
    name: 'Example',
    meta: {
      title: 'Example',
      icon: 'example'
    },

到此结束 over
嘤嘤嘤