关于前端:利用webpack的-requirecontext-api进行自动导入

require.context api及参数介绍

require.context(dir, useSubdir, regExp)
参数dir：用于动静加载的目录
参数useSubDir：是否对dir指定的子目录进行主动导入， type=boolean
参数regExp：匹配文件的正则表达式，能够在文件中退出特定的字符，依照特定的字符去加载对应的文件

eg: require.context( ‘.’, false, /-route.js$/ )
主动加载以后文件中以-route.js结尾的文件，对子目录不加载

require.context 函数执行后返回一个函数，并且这个函数有三个属性

• keys 这个属性是一个函数，返回匹配胜利模块的名称组成的数据，数组中的每一项就是每个文件的门路（绝对于dir这个参数指定的相对路径）
• resolve 这个属性也是一个函数，它接管一个keys()执行之后数组项的参数，返回该参数对应文件绝对于整个我的项目的相对路径（绝对于我的项目根目录的相对路径）
• id 执行环境的id

require.context函数执行后返回的函数接管一个参数

参数模式为keys函数执行后的数组项，接管参数执行后就拿到了对应文件中的内容

残缺示例：

// 主动导入的两个文件示例
// 文件一
import { lazy } from 'react';
const ComOne = lazy(() => import('../views/day3/ComOne'));  

const publicRoutes = [
    {
        path: '/comone',
        component: ComOne,
        exact: true
    } 
];
export default publicRoutes;

// 文件二
import { lazy } from 'react';
const ComTwo = lazy(() => import('../views/day3/ComTwo')); 

const publicRoutes = [
    {
        path: '/comtwo',
        component: ComTwo,
        exact: true
    }
];
export default publicRoutes;

// 主动导入文件
const files = require.context( '.', false, /-route.js$/ ); 
let routes = [];
files.keys().forEach((item)=>{ 
    // 这里的default根据文件一和文件二中的导出形式而定 
    const _routes = files(item).default; 
    // 上面的为业务代码，依据本人的需要而定
    if(Array.isArray(_routes) && _routes.length){
        routes = routes.concat(_routes);  
    }
})

export default routes;