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;