Question

我正在尝试从另一个JavaScript文件导入函数，但是main.js中的import语句发生错误。

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>

Answer 1

基于错误消息

您正在运行Chrome
您尚未在脚本标记中设置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

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

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

这样的网络服务器在本地托管代码

在线上提供了许多教程，这些教程为您提供了现代网络开发入门的简要清单，但这是您可以自己研究的主题列表。

node.js这是用于javascript执行
express.js这是用于使用node.js
es6这是一个规范，是ecmascript（javascript）的较新“版本”，具有导入和导出以及对象分解等新功能
babel这是一个编译器，可以将新代码（例如es6）转换为可以在旧系统（例如es5）上运行的代码
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";

导入时出现“未捕获到的SyntaxError：意外令牌{”

3 个答案: