Question

我曾经使用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')
)

Answer 1

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

如果您想详细了解事情的进行方式以及如何配置应用程序，请创建一个新的create-react-app，然后运行

npm run eject

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

更新

您可以尝试的一件事是使用以下命令安装所有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手动翻译代码，然后导入已翻译的文件
按原样explained here使用babel

对于我所说的使用应用程序编译的含义，我的意思是在HTML而不是{{1}中包含babel-cli命令的输出文件（如果运行了我上面写的命令，则为app-compile.js）。 }

Answer 2

<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中出现意外令牌

2 个答案: