未捕获到的SyntaxError：从“反应”导入React中出现意外令牌_JavaScript

我曾经使用create-react-app编写一个react应用，但没有问题。 但是，我尝试仅使用index.html和app.js制作一个小型应用程序。 Chrome import和JSX 。 对于import ， Uncaught SyntaxError: Unexpected token对于JSX， Uncaught SyntaxError: Unexpected token <是因为没有安装BABEL或ES6。

我尝试安装babel，但仍然无法正常工作。 我也尝试添加type="text/babel"

的index.html

<!Doctype html>
<html>

<head>
    <title>Social Card</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>content fahafafafaddha</h1>
    <div id="root">
    </div>
    <script src= "app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</body>
</html>

app.js

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
    <h1> Hello</h1>,
    document.getElementById('root')
)

该错误肯定是因为您的代码尚未转译（babel就是这样做的）。 您说您安装了babel ..这是什么意思？ 您需要配置babel，以便它在运行代码之前转译您的代码。 create-react-app通过使用webpack转换，打包和最小化代码来为您完成此任务。

如果您想了解有关工作方式以及如何配置应用程序的详细信息，请创建一个新的create-react-app，然后运行

npm run eject

这将弹出所有先前隐藏的配置，并帮助您了解事物的运行方式。

UPDATE

您可以尝试的一件事是将所有babel-cli安装到

npm install --save-dev @babel/core @babel/cli

然后你可以像这样使用它

npx babel app.js --out-file app-compiled.js

并使用应用程序编译来运行服务器。

更新2

您正在使用ES6语法（导入语句）以及JSX（在javascript文件中使用HTML-ish代码）。 这段代码无法由JS编译器直接编译，这就是为什么它向您显示上述错误。 为了解决此问题，您需要将其转换为浏览器可以读取的JS。 有几种方法可以做到这一点，其中一些是：

使用webpack转换，缩小，捆绑并将代码注入html。
使用babel-cli手动转译代码，然后导入转译的文件
如此处独立使用babel

至于我使用app-compiled的意思，我的意思是将babel-cli命令的输出文件（如果您运行了我上面写的命令，则为app-compile.js ）包含在HTML中，而不是app.js

<script>标记的顺序很重要。 它们按照出现的顺序加载。 所以，你的app.js一定要来巴贝尔后的反应：

 <div id="root"></div> <!-- DEPENDENCIES MUST COME FIRST --> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <!-- Your scripts --> <script type="text/babel"> const App = () => <h1>Hello React!</h1>; ReactDOM.render(<App />, document.getElementById('root')); </script>

接下来，仅在脚本标记中包含依赖项时，就不能使用import语句。 它们将仅在全局名称空间中可用。 在脚本标签上指定type="module"属性时，您也可以使用模块，但是该功能只是最近才添加的，可能不被当前使用的浏览器版本支持。

未捕获到的SyntaxError：从“反应”导入React中出现意外令牌

问题描述

1楼

2楼