利用webpack的 require.context 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; 
阅读 288
2 声望
1 粉丝
0 条评论
你知道吗?

2 声望
1 粉丝
文章目录
宣传栏