浏览器中的 ES6 模块：Uncaught SyntaxError: Unexpected token import答案

【问题标题】：ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import浏览器中的 ES6 模块：Uncaught SyntaxError: Unexpected token import
【发布时间】：2017-06-03 00:29:35
【问题描述】：

我是ES6（ECMAScript 6）的新手，我想在浏览器中使用它的模块系统。我读到 ES6 受 Firefox 和 Chrome 支持，但使用 export 时出现以下错误

Uncaught SyntaxError: Unexpected token import

我有一个 test.html 文件

<html>
    <script src="test.js"></script>
<body>
</body>
</html>

还有一个 test.js 文件

'use strict';

class Test {

    static hello() {
        console.log("hello world");
    } 
}

export Test;

为什么？

【问题讨论】：

ES6 modules 在浏览器中尚不支持。此外，您仍在加载脚本，而不是模块。
我还是不明白脚本和模块的区别
见here
我注意到的重要部分是<script type="module"></script> 确保添加它，否则您将收到该错误。我一直在不停地做<script>import ... </script>，知道现在据说chrome支持没有标志的ES6模块，然后我注意到需要type属性来向浏览器指定这是一个ES6模块，没有它你得到那个确切的错误。
我使用的是 Chrome 68，当我们使用 import * from 时我仍然看到这个错误

标签： javascript html ecmascript-6 module es6-modules

【解决方案1】：

可能是您将现有脚本更改为模块并忘记删除原始脚本标记。这就是发生在我身上的事情以及我是如何被引导到这个页面的。我原来有这个：

<script src="app.js" defer></script>

然后我更改了我的主脚本标记以将其作为模块导入并且它正在工作，但我仍然收到错误。我无法弄清楚它是如何工作并引发错误的，但我忘记了删除原始脚本标签。

【讨论】：

【解决方案2】：

许多现代浏览器现在都支持 ES6 模块。只要您使用<script type="module" src="..."> 导入脚本（包括应用程序的入口点），它就可以工作。

查看caniuse.com了解更多详情： https://caniuse.com/#feat=es6-module

【讨论】：

【解决方案3】：

您可以在 Google Chrome Beta (61) / Chrome Canary 中试用 ES6 模块。

参考 Paul Irish 的 ToDo MVC 实现 - https://paulirish.github.io/es-modules-todomvc/

我有基本的演示 -

//app.js
import {sum} from './calc.js'

console.log(sum(2,3));

//calc.js
let sum = (a,b) => { return a + b; }

export {sum};

<html> 
    <head>
        <meta charset="utf-8" />
    </head>

    <body>
        <h1>ES6</h1>
        <script src="app.js" type="module"></script>
    </body>

</html>

希望对你有帮助！

【讨论】：

没错...我注意到的重要部分是<script type="module"></script> 确保添加，否则您将收到该错误。我一直在不停地做<script>import ... </script>，知道现在据说chrome支持没有标志的ES6模块，然后我注意到需要type属性来向浏览器指定这是一个ES6模块。
{ "message": "Uncaught SyntaxError: Unexpected token {", "filename": "stacksnippets.net/js", "lineno": 24, "colno": 8 }
我在上面运行你的代码sn-p得到了上述错误，使用chrome v67，为什么？
@hoogw Stackoverflow 添加了自动运行代码 sn-p。此代码无法按原样执行。您必须将代码复制到 index.html 并如上所示分离 .js 文件并在浏览器中尝试！
感谢有用的回答。我为你删除了 sn-p runner。（正如我所见，StackOverflow sn-ps 不能有多个 js 源）。

【解决方案4】：

它对我有用将 type="module" 添加到脚本 importing 我的 mjs：

<script type="module">
import * as module from 'https://rawgit.com/abernier/7ce9df53ac9ec00419634ca3f9e3f772/raw/eec68248454e1343e111f464e666afd722a65fe2/mymod.mjs'

console.log(module.default()) // Prints: Hi from the default export!
</script>

查看演示：https://codepen.io/abernier/pen/wExQaa

【讨论】：

【解决方案5】：

很遗憾，目前许多浏览器都不支持模块。

此功能此时才刚刚开始在浏览器中本地实现。它在许多转译器（例如 TypeScript 和 Babel）以及打包器（例如 Rollup 和 Webpack）中实现。

发现于MDN

【讨论】：

我看到这个功能是在一个Sof问题中实现的，但是MDN的来源其实更可靠。
根据以下链接 Chrome 61 应该支持导入 - 它不支持。 medium.com/dev-channel/…
你必须将 type="module" 添加到你的脚本标签中。