浏览器内 javascript 不会同时识别 "import" 和 JSX

Question

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

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

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

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

Answer 1

作为变通方法，您可以将 FirstComponent 导入 index.html 页面，只需执行以下操作：

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

并且在 FirstComponent.js 中，删除导入和导出语句 以便 文件只有 FirstComponent class/functional 组件.这会将 class 作为内联 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

浏览器内 javascript 不会同时识别 "import" 和 JSX

In-browser javascript won't recognize "import" and JSX at the same time

javascript

reactjs

requirejs

jsx

babeljs