ES2015 模块导入导出语法错误

Question

在 ES6 中使用导入导出时，出现以下错误：

SyntaxError: 出口声明只能出现在顶层

我上网查找如何解决此问题，但无法解决。任何人都可以对此进行解释。我是 ES6 新手，尤其是导入和导出。 （我完全使用 StealJS 来处理这种东西） 谢谢！

js 文件是：

app.js

import { cube, cubeRoot } from 'functions';

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

functions.js

// functions.js

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

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

export { cube, cubeRoot}

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 将不起作用。

以下已过时的答案：

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

原因是模块加载器的规范仍在进行中。见https://whatwg.github.io/loader/#status

然而，它们是填充或自动转换这种语法的工具，就像 babel 一样。