浏览器中的ES6模块：Uncaught SyntaxError：意外的令牌导入

85

我是ES6（ECMAScript 6）的新手，我想在浏览器中使用其模块系统。我阅读了Firefox和Chrome支持的ES6，但是使用时出现以下错误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;

为什么？

— 达尔文
source

浏览器尚不支持ES6模块。另外，您仍在加载脚本，而不是模块。

— Bergi

3

我仍然不了解脚本和模块之间的区别

— cdarwin

看到这里

— Bergi

20

我注意到的重要部分是<script type="module"></script>确保您添加，否则将得到该错误。我一直不停地敲击墙壁<script>import ... </script>，这是故意地知道chrome现在据说支持不带标志的ES6模块，然后我注意到需要type属性来向浏览器指定这是ES6模块，没有它，您将得到确切的信息。错误。

— 伊曼纽尔·马哈尼

1

我使用的是Chrome 68，当我们使用import * from

— Integration

66

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

请访问caniuse.com了解更多详细信息：https : //caniuse.com/#feat=es6-module

— 虚无
source

53

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

由保罗·爱尔兰待办事项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>

希望能帮助到你！

— 罗比什·雷迪（Roopesh Reddy）
source

33

没错...我要注意的重要部分是<script type="module"></script>确保您添加，否则将收到该错误。我一直在不停地敲击墙壁<script>import ... </script>，这是众所周知地，现在据说chrome支持不带标志的ES6模块，然后我注意到需要type属性才能向浏览器指定这是ES6模块。

— 伊曼纽尔·马哈尼

1

{“ message”：“未捕获的SyntaxError：意外令牌{”，“ filename”：“ stacksnippets.net/js ”，“ lineno”：24，“ colno”：8}

— hoogw

4

我通过在上面运行您的代码片段而遇到上述错误，请使用chrome v67，为什么？

— hoogw

@hoogw Stackoverflow添加了自动运行代码段。此代码无法按原样执行。您必须如上所述将代码复制到index.html并分离.js文件，然后在浏览器中尝试！

— Roopesh Reddy '18年

谢谢有用的答案。我为您删除了代码段播放器。（如我所见，StackOverflow片段不能有多个js源）。

— Mir-Ismaili

25

不幸的是，许多浏览器目前不支持模块。

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

在MDN上找到

— t3h2mas
source

我读过此功能是在Sof问题中实现的，但MDN源实际上更可靠。

— cdarwin '17

根据以下链接，Chrome 61应该支持导入-不支持。medium.com/dev-channel/…–

— Marc

4

您必须在脚本标签中添加type =“ module”。

— smohadjer '18

10

它为我添加type="module"了import对我的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

— 阿伯尼尔
source