我正在构建一个模块化 react 应用程序。但我遇到了一个问题，无法动态导入应用程序的路由。想象一下:
应用程序
├── 应用程序.js
└── 模块
├── 模块_1
│ └── 路线.js
├── 模块_2
│ └── 路线.js
└── 模块_3
└── 路线.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}>
};
然后我会在我的 app.js 中执行此操作:
const Routes = import('modules/**/routes.js');
const App = () => (
<BrowserRouter>
<Routes />
</BrowserRouter>
);
export default App;
现在我正在运行一个单独的 Node 脚本，为所有的routes.js 文件创建一个索引文件，但这变得很乏味。我希望可能有更好的方法
最佳答案
npm 包 import-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]
关于javascript - 使用 glob 导入多个文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53216259/