Импорт нескольких файлов с глобусом

Question

Я создаю модульное приложение реакции. Но я столкнулся с проблемой, когда я не могу динамически импортировать маршруты моего приложения. Представь себе:

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

Представьте себе все файлы rout.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;

Прямо сейчас я запускаю отдельный скрипт узла, который создает индексный файл для всех файлов rout.js, но это становится утомительным. И я надеюсь, что может быть лучший способ сделать

Answer 1

Пакет 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]

Answer 2

Создайте index.js в каждой папке, из которой вы хотите экспортировать вещи, и в нужную вам структуру.

Вы можете, например, 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}"/>)}