ES2015模块的导入和导出语法错误

Question

在使用ES6中的import export时，我遇到了以下错误：

SyntaxError：导出声明只能出现在顶层

我搜索了一下如何解决这个问题，但是我无法解决。有人可以解释一下吗？我对ES6很陌生，特别是import和export。(我之前完全使用StealJS处理这种东西) 谢谢！

js文件为：

app.js

import { cube, cubeRoot } from 'functions';

console.log(cube(4));
console.log(cubeRoot(125));

函数.js

// functions.js

function cube(a) {
    return a * a * a;
}

function cubeRoot(a) {
    return Math.cbrt(a);
}

export { cube, cubeRoot}

- Vino

---

functions是一个文件还是模块？也许你需要使用import {...} from './functions'？ - Davin Tryon

你确定你没有漏掉一些开放的大括号吗？这是你的确切代码吗？你能展示一下确切的设置以及你是如何转译它的吗？ - Bergi

这是完整的错误信息吗？有任何行号之类的东西吗？ - Bergi

我正在遵循 http://www.hongkiat.com/blog/ecmascript-6/ 上的一个简单示例，第9点模块。控制台中的错误消息 - SyntaxError：导出声明只能出现在顶层export { cube，cubeRoot }functions.js（第11行，第4列） SyntaxError：导入声明只能出现在顶层import { cube，cubeRoot } from 'functions';app.js（第3行，第4列） - Vino

Answer 1

2017年夏季更新:

请查看http://caniuse.com/#search=modules，新的支持，也许需要更改设置。

现在事情不再模糊。为了使一个模块工作，你必须告诉浏览器它是个模块(另一个是脚本)。第一种方式是隐式的，导入的模块总是一个模块。第二种方式是使用type module <script src="anymodule.js" type="module"></script>

确保导入和导出仅位于顶级，不在块内，不在if语句内，不在循环内等。

还要确保提供完整路径(包括.js)，它应该以./或../开头。假设文件都在同一个文件夹中，那么它将是import { cube, cubeRoot } from './functions.js';

eval一个模块字符串将无法工作。

下面是过时的答案:

ES2015模块导入和导出语法在我撰写此答案时(04/2016)未被任何浏览器支持。错误消息是误导性的，因为它暗示该语法得到了支持，但实际上根本没有支持。请参见此处的第一个注释https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

原因是模块加载器规范仍在进展中。请查看https://whatwg.github.io/loader/#status

然而，有一些工具可以自动填充或转换这种语法，比如babel。

- Walle Cyril

---

浏览器中缺少一个模块特性不会导致 OP 报告的错误消息。 - user663031

我想表达的意思是，如果浏览器不支持模块化，它根本不会生成那个信息。相反，它会生成一个类似于“Unexpected token import”的信息。因此，OP的问题在其他地方。 - user663031

在完美的世界里可能不会出现这种情况，但有时编写错误消息的人也会犯错，这不是具备经过充分测试的错误消息的gcc。 - Walle Cyril

在Windows上尝试了FF 53并确认：您收到的错误消息确实是“SyntaxError：export declarations may only appear at top level of a module”，而在Chrome中则是（更详细的）“Unexpected token export”。哎呀，奇怪。 - noppa

@WalleCyril 哈哈，抱歉，我竟然没有注意到这是一个如此古老的问题和答案。我认为你的旧答案并没有过时，在昨天的评论中，我赞同Firefox确实会给出这个错误来指示没有模块支持，而不像torazaburo在他的评论中所说的那样。 - noppa

如果您在about:config中更改设置，就可以在Firefox中尝试此功能。 - Walle Cyril