Можно ли лениво загрузить набор компонентов / модулей в React с URL? - PullRequest
Новая
       5

Можно ли лениво загрузить набор компонентов / модулей в React с URL?

0 голосов
/ 09 января 2020

У меня есть приложение React, которое я создаю и которое будет поддерживать сторонних разработчиков, пишущих свои собственные компоненты, которые мы протестируем и затем разместим в нашей компании CDN. У меня есть динамическая c загрузка модулей, работающих с использованием @loadable/component, но я не могу понять, как заставить это работать для чего-то, что живет по веб-адресу.

Вот что у меня есть для ленивая загрузка компонентов. Компоненты для извлечения выделены в файле. json. Этот файл. json анализируется, и компонент, который я написал, извлекает индекс. js в этом месте и загружает этот компонент в приложение. 

import moduleMetaData from "../thirdparty_modules"; //the json file outlining which modules to load
import loadable from "@loadable/component";
import React from "react";

const Module = (props) => {
    let id = props.id;
    let LoadedModule = null;

    if (!!moduleMetaData[id]) {
        let moduleLocation = moduleMetaData[id].location;

        LoadedModule = loadable(() => import(`${moduleLocation}`), {
            fallback: <div>Loading Module...</div>
        });
    }    
    return <LoadedModule/>;
}

export default Module;

Вот файл. json, который он использует : 

{
  "module1": {
    "name": "ModuleTest1",
    "location": "./main/module1/index"
  }
}

Затем я использую этот компонент <Module /> внутри моего приложения. js для загрузки модулей в мое приложение: 

const App = () => {
    const GetModules = () => {
        let loadedModules = [];
        for(let key in moduleMetaData){
            loadedModules.push(<Module key={key} id={key}/>);
        }

        return loadedModules;
    }

    return (
        <AppContext.Provider
            value={{
                routes
            }}
        >
            <StylesProvider jss={jss} generateClassName={generateClassName}>
                <Provider store={store}>
                    <MuiPickersUtilsProvider utils={MomentUtils}>
                        <Auth>
                            <Router history={history}>
                                <FuseAuthorization>
                                    <FuseTheme>
                                        <FuseLayout/>
                                    </FuseTheme>
                                </FuseAuthorization>
                            </Router>
                        </Auth>
                    </MuiPickersUtilsProvider>

                    {/*LOAD MODULES*/}
                    {GetModules()}
                </Provider>
            </StylesProvider>
        </AppContext.Provider>
    );
};

export default App;

Этот код позволяет мне лениться загружать компоненты и модули из моего каталога /src, при условии, что путь к файлу индекса каждого модуля добавлен в thirdparty_modules. json.

У меня проблема в том, что я не могу заставить это работать для модулей, которые хранятся на внешнем веб-сервере. Если я переместлю каталог module1 из ./src/main/module1 в наш CDN с примерным адресом https://our.cdn.net/module1, а затем обновлю мое местоположение. json до https://our.cdn.net/module1/index, я получу ошибку:

Необработанный отказ (ошибка): не удается найти модуль 'https://our.cdn.net/module1/index'

Как я могу заставить мою ленивую загрузку компонентов загружаться с внешнего URL-адреса, вместо того, чтобы загрузить из моего локального каталога /src?

1 Ответ

0 голосов
/ 09 января 2020

Хотя вы не можете использовать его с import, вы все равно можете получить данные, например, с помощью Fetch API и вернуть их.

Что-то вроде 

        LoadedModule = loadable(() => fetch(moduleLocation).then(res => res.text())

должно работать просто отлично.

...