导入时出现“未捕获的语法错误：意外的令牌 {”

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

另外，我在这个链接中运行了代码 sn-p 并得到了同样的错误。 ES6 in the browser: Uncaught SyntaxError: Unexpected token import

编辑： 更正 index.html 文件：

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

Answer 1

根据错误信息

1. 您正在运行 Chrome，
2. 你没有在脚本标签中设置type="module"

我正在尝试找到一些关于脚本标签的模块类型的好文档，但是this is the best I can find so far

所以，如果你的脚本标签是

<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>

Answer 2

如果您使用的是转译器，您的语法很好，特别是 babel 是当今大多数人使用的转译器。

您可以使用脚本<script type=module src="main.js" /> 中的“模块”类型在现代浏览器中专门启用某些 es6 功能（包括导入和导出），但如果您在本地运行跨源请求，则内容将无法合作，因此您可以托管你的代码在本地使用像express.js这样的网络服务器

网上有很多教程可以帮助您了解如何开始现代 Web 开发，但这里列出了您可以自己研究的主题。

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

有很多东西要学，我们作为一个社区可以改进的最好的地方之一。为避免所有混乱的启动工作，您可以尝试像 https://codesandbox.io/ 这样的项目，该项目旨在简化整个过程。

Answer 3

在您的出口中

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

在你的导入中

import Event from "event.js";