reactjs如何使用导入导出功能？

Question

我是新学习的 React 库，这个问题已经两周了，现在无法解决。 所以当我在一个文件“Index.js”中拥有所有功能时

function Header(){
    return(
        <header>
            <nav className="nav">
                <img src="./logo-react.png" width="100px"/>
                <ul className="nav-items">
                    <li>Price</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
    )
}

function Maincont(){
    return (
        <div>
            <Header />
        </div>
    )
}

ReactDOM.render(< Maincont />,document.getElementById("root"))

一切正常没问题，但是一旦我将函数切换到其他文件“Header.js”并尝试将其导出导入到“index.js”，它就会停止工作我正在使用带有 CDN 链接的 React，这是我的 HTML 代码也是

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="index.js" type="text/babel"></script>

我也尝试将类型更改为 Module 但仍然不可能这是控制台中显示的内容

index.js:3 Uncaught ReferenceError: require is not defined
    at <anonymous>:3:15
    at i (babel.min.js:24:29679)
    at r (babel.min.js:24:30188)
    at e.src.n.<computed>.l.content (babel.min.js:24:30503)
    at XMLHttpRequest.n.onreadystatechange (babel.min.js:24:29946)
(anonymous) @ index.js:3
i @ babel.min.js:24
r @ babel.min.js:24
e.src.n.<computed>.l.content @ babel.min.js:24
n.onreadystatechange @ babel.min.js:24
XMLHttpRequest.send (async)
s @ babel.min.js:24
(anonymous) @ babel.min.js:24
o @ babel.min.js:24
u @ babel.min.js:24
f @ babel.min.js:1
(anonymous) @ babel.min.js:1
 

Answer 1

Babel 没有 polyfill require 。 您需要：

使用 ES6 模块，其中你的入口点加载了<script type="module">然后你使用import和export而不是require和module.exports 。 我相信您还需要对 Babel 进行一些更改，以使其能够在客户端处理 ES6 模块导入。

在将代码发送到浏览器之前，使用 Webpack 或 Parcel 等工具结合 Babel转译和捆绑代码。