javascript - 将 react 添加到现有网页(旧版) - 导入不起作用

Question

我已将 React dev 导入网页(旧版 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

知道我错过了什么吗？如何在我的旧 HTML+JQuery 应用程序中开始使用 React 组件(通过导入其他组件)？

Answer 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 和您在这里使用的任何其他库)捆绑到一个文件中。