javascript - 浏览器内的 javascript 无法同时识别 "import"和 JSX

Question

我正在尝试创建一个简单的 React 应用程序，从 components 导入组件。目录。目前这是我的文件夹结构:

main
|_components
|   |_FirstComponent.js
|_index.html

FirstComponent.js

export class FirstComponent extends React.Component{
    render(){
        return (
            <h1>Hello World</h1>
        )
    }
}

在index.html中，我有加载react、react-dom和babel的脚本。这是到目前为止我的 JS 代码:

<script type="module">
    import FirstComponent from "./components/FirstComponent.js";
</script>

这给了我错误:Uncaught SyntaxError: Unexpected token '<'

这是 JSX 解析的错误，但是当我将脚本类型切换为 text/babel 时:

<script type="text/babel">
    import FirstComponent from "./components/FirstComponent.js";
</script>

我收到此错误:Inline Babel script:2 Uncaught ReferenceError: require is not defined

换句话说，如果类型是 module，浏览器就无法读取 JSX，但如果类型是 babel，浏览器就无法识别 require，即 import。

如何让浏览器正确加载组件？

Answer 1

作为解决方法，您可以通过简单地执行以下操作将 FirstComponent 导入到 index.html 页面:

<script type="text/babel" src="./components/FirstComponent.js"></script>

在 FirstComponent.js 中，删除导入和导出语句，以便文件仅包含 FirstComponent 类/功能组件。这会将类加载为内联 babel 脚本，并且您的组件将可供使用。您可以使用index.html底部的ReactDOM.render()来渲染组件。这是一个简单的解决方法。

FirstComponent.js

// No import statements
class FirstComponent extends React.Component{
    render(){
        return (
            <h1>Hello World</h1>
        )
    }
}
// No export default statement