Я импортировал реагирующего разработчика на веб-страницу (устаревший HTML + JQuery) следующим образом:

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script type="module" src="dist/Menu.js"></script>

И я пытаюсь использовать компонент меню, который имеет следующий код:

    import menuData from "./menuData";
    import MenuItem from "./MenuItem";
    
    export const Menu = () => {
        return (
            <p>Some code..</p>
)
    };
    
    let domContainer = document.querySelector('#main_menu');
    ReactDOM.render(<Menu />, domContainer);

В моем устаревшем приложении перед импортом мне пришлось перенести JSX в JS, используя: npx babel --watch src --out-dir dist --presets react-app/prod,

А в моем устаревшем приложении, помимо импорта (см. Выше), я написал следующий элемент:

<div id="main_menu"></div>

Но мое устаревшее приложение показывает ошибку 404 для моего импорта:

404 https://mywebpage.com/dist/menuData
404 https://mywebpage.com/dist/MenuItem

Есть идеи, что мне не хватает? Как я могу начать использовать компоненты React (с импортом других компонентов) в моем устаревшем приложении HTML + JQuery?

3
TheUnreal 9 Апр 2021 в 08:43

1 ответ

Лучший ответ

Действительно ли импортированные пути существуют на вашем сайте? Откройте браузер и перейдите в

https://mywebpage.com/dist/menuData

Если они не решат использовать простой исходный код .js - а, похоже, они этого не делают - они не будут работать. Вероятно, вам нужно добавить расширение файла, поскольку похоже, что ваш сервер этого не делает:

import menuData from "./menuData.js";
import MenuItem from "./MenuItem.js";

Такой, что собираюсь

https://mywebpage.com/dist/menuData.js

Показывает вам файл JS.

Но еще лучший вариант, который вы также можете рассмотреть, - это объединить код вместе во время процесса сборки, чтобы клиент мог обслуживать только один .js файл. По мере того, как приложение становится все больше и больше, если клиенту необходимо запросить 20 или 30 или более модулей с вашего сервера, это может значительно снизить производительность, если вы не используете HTTP / 2. Рассмотрим такой сборщик модулей, как Webpack. Вы можете превратить свой HTML в

<script src="dist/bundle.js"></script>

Путем объединения всех ваших модулей (и React, и любых других библиотек, которые вы здесь используете) в один файл.

0
CertainPerformance 9 Апр 2021 в 05:48