导入时出现了“Uncaught SyntaxError: Unexpected token {”错误

Question

我试图从另一个 JavaScript 文件导入一个函数，但是在 main.js 中的导入语句出现了错误。

main.js：

import {Event} from 'event.js';

let asdf = new Event("hi", "hi", "hi");
console.log(asdf.title);
console.log(asdf.mainText);
console.log(asdf.buttonSet);

event.js:

export function Event(title, mainText, buttonSet) {
    this.title = title;
    this.mainText = mainText;
    this.buttonSet = buttonSet;
}

我查看了语法，没有发现任何问题：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import。此外，我在链接中运行代码片段，得到了相同的错误：ES6 in the browser: Uncaught SyntaxError: Unexpected token import。 编辑：已更正index.html文件。

<script src="scripts/main.js" type="module"></script>

- Hyrial

---

你是否使用转译器来处理 es6 语法？（es6 语法指的是 import 和 export 语句） - wizebin

抱歉，我对JavaScript还不熟悉。什么是转译器？ - Hyrial

哦，你已经有了 type="module" ... 那很有趣。使用的是哪个浏览器和浏览器版本？ - Jaromanda X

Answer 1

根据错误信息：

1. 您正在使用Chrome浏览器，
2. 您在脚本标签中没有设置type="module"。

我正在尝试查找有关脚本标记模块类型的良好文档，但是这是目前为止我能找到的最好的文档。

因此，如果您的脚本标记如下：

<script type="application/javascript">
import {Event} from "event.js";
......
</script>

甚至如果是以下内容（因为类型是可选的）

<script>
import {Event} from "event.js";
......
</script>

将其更改为

<script type="module">
import {Event} from "event.js";
......
</script>

- Jaromanda X

---

我应该在哪里添加？ - Hyrial

抱歉，我正在添加一个链接... <script type="module" ..... 因此，不再使用 <script type="application/javascript" ....（当然，对于JavaScript脚本来说，type现在实际上是可选的）。 - Jaromanda X

@JaromandaX 如果我不使用HTML，那么我应该在哪里添加脚本标签？ - coder123

@coder123 - 1. 如果你“不使用HTML”，那么就没有地方放置HTML SCRIPT标签。2-这与此问题和答案有何关联？ - Jaromanda X

因为我遇到了相同的错误，但是我不知道该如何解决它！ - coder123

Answer 2

如果你使用转译器，特别是babel，那么你的语法就没问题了。现在大多数人使用的都是这个转译器。

您可以通过在脚本中使用“module”类型（<script type=module src="main.js" />）来在现代浏览器中启用某些es6功能（包括导入和导出），但是如果您在本地运行跨域请求内容，将无法合作，所以您可以像使用express.js这样的Web服务器将代码托管在本地。

如今有许多在线教程可供学习现代Web开发的基础知识，但是以下是一些您可以自己研究的主题列表：

1. node.js：用于JavaScript执行
2. express.js：用于使用node.js创建服务器
3. es6：这是一个规范，是ECMAScript（JavaScript）的较新版本，它具有诸如导入和导出以及对象解构等新功能
4. babel： 这是一个转译器，用于将新代码（例如es6）转换为可以在旧系统（例如es5）上运行的代码
5. webpack：这是一个Javascript打包系统，用于合并代码和执行模块化转译器

有很多东西需要学习，我们作为一个社区可以改进的最好方式之一是尝试使用https://codesandbox.io/这样的项目，这个项目旨在使整个过程变得更加容易。

- wizebin

---

express.js是使用node.js创建服务器的工具，但需要指出的是，它并非创建服务器所必需，可以将其视为“奢侈品”或非必要项，就像jquery不是使用javascript所必需的一样。 - user2677034

Answer 3

在你的导出中

Export default function Event(title,mainText,buttonSet){
    this.title=title;
    this.mainText=mainText,
    this.buttonSet=buttonSet;
}

在你的导入中

import Event from "event.js";

- Sidy Mbengue