导入多个文件

Question

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

app ├── app.js └── modules ├── module_1 │ └── routes.js ├── module_2 │ └── routes.js └── module_3 └── routes.js

想象一下所有包含以下内容的route.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;

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

Answer 1

在要从中导出内容的每个文件夹中以及所需的结构中创建一个index.js 。

例如，您可以export * from './routes'每个模块中的export * from './routes' ，然后依次将其导出到modules文件夹中，例如

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

然后在您的app.js ， import { routes } from './modules并将它们类似地应用于：

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

Answer 2

npm包import-glob正是我想要实现的。

- 编辑 - -

该软件包基本上执行@E的操作。 桑丁在他的帖子中描述。 您基本上是将软件包作为预加载器添加到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]