Javascript 使用glob导入多个文件

我正在构建一个模块化的react应用程序。但我遇到了一个问题，我无法动态导入我的应用程序的路由。想象一下：

app
├── app.js
└── 模块
├── 单元1
│   └── routes.js
├── 模块2
│   └── routes.js
└── 单元3
└── routes.js

假设所有routes.js文件都包含以下内容：

//modules/module_*/route.js
import React, { Fragment } from 'react';
import { Route } from 'react-router-dom';

export default () => {
    <Route path="/module/path" component={ModuleComponent}>
};

//modules/module_*/route.js
从“React”导入React，{Fragment}；
从'react router dom'导入{Route}；
导出默认值（）=>{
};

然后，我将在app.js中执行以下操作：

const Routes = import('modules/**/routes.js');

const App = () => (
   <BrowserRouter>
       <Routes />
   </BrowserRouter>
);
export default App;

constroutes=import（'modules/**/Routes.js'）；
常量应用=（）=>(
);
导出默认应用程序；

---

现在，我正在运行一个单独的节点脚本，为所有routes.js文件创建一个索引文件，但这会变得单调乏味。我希望有更好的方法，在每个文件夹中创建一个

index.js

，以您想要的结构导出内容

例如，您可以在每个模块中

导出“./routes”

，然后依次将这些导出到

模块

文件夹中，如

import route1 from './module_1';
import route2 from './module_2';
import route3 from './module_3';
export const routes = [route1, route2, route3];

然后在你的

app.js

中，你

从“./modules

导入{routes}，并将这些类似的应用于：

{routes.map((route, i) => <Routes key="{i}"/>)}

{routes.map（（route，i）=>）}
npm包
导入glob
正是我想要实现的目标

--编辑---

该软件包基本上实现了@E.Sundin在其帖子中描述的功能。基本上，您可以将包作为预加载程序添加到JavaScript文件中，这样您就可以

import modules from "./foo/**/*.js";

软件包将其扩展为：

import * as module0 from "./foo/1.js";
import * as module1 from "./foo/bar/2.js";
import * as module2 from "./foo/bar/3.js";

modules = [module0, module1, module2]

问题在于它是一个模块化的应用程序。每次添加或删除模块时，我都必须更新路由器。您给出的示例已经是我现在如何做的，但是我运行了一个filewatcher来为我做索引。我希望有一个更优雅的解决方案。