利用webpack的 require.context api进行自动导入

Posted 2021-09-14 闲人

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;