前端文件系统一次性导入某个文件夹的文件

1. require.context()

如果你的项目中使用的是webpack,就可以使用require.context()来实现该需求；

这里记录一下，我刚开始使用的时候遇到的问题：

（1）：使用require.context 报错Property 'context' does not exist on type 'NodeRequire'？

我刚用脚手架生成了一个全新的项目，想要先搭建个简易版的路由，然后就借鉴了一下之前的项目，在导入路由文件夹下的文件时，使用require.context()时，确提示require身上并没有该引用；

解决方案就是：

首先安装：

 npm i @types/webpack-env -D

其次在tsconfig.json文件中添加配置：

  {
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": [
      "node",
      "webpack-env" // 就是这里
    ]
  },
  "include": ["src"]
}

这样，问题就解决了；

require.context()的使用方式参见官网地址## require.context；

  // 函数定义
  require.context(
  directory, // 导入的文件夹
  (useSubdirectories = true), // 是否包含子文件夹
  (regExp = /^\.\/.*$/), // 匹配文件路径的正则表达式
  (mode = 'sync') 
);

使用例子（我这里是一次性导入路由文件夹下的所有路由文件）：

const routeFiles = require.context('./modules', false, /\.tsx$/)
// 路由文件下声明的所有路由对象
const routerList: RouteObject[] = []
console.log('一次性导入的路由文件', routeFiles.keys())

routeFiles.keys().forEach((key) => {
  console.log(routeFiles(key))
  routerList.push(...routeFiles(key).default)
})

2. import.meta.globEager()

如果你的项目用的是vite,就可以使用Glob 导入； Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：

import.meta.globEager()的使用方式参见官网地址：Glob 导入；

使用例子:

const routeFiles = import.meta.globEager("./modules/*.tsx");

// * 处理路由
const routerArray: RouteObject[] = [];
Object.keys(routeFiles).forEach(item => {
	Object.keys(routeFiles[item]).forEach((key: any) => {
		routerArray.push(...metaRouters[item][key]);
	});
});