ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import

Question

我是 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;

为什么？

Answer 1

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

This feature is only just beginning to be implemented in browsers natively at this time. It is implemented in many transpilers, such as TypeScript and Babel, and bundlers such as Rollup and Webpack.

发现于 MDN

Answer 2

您可以在 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>

希望对您有所帮助！

Answer 3

它对我有用 添加 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

Answer 4

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

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

Answer 5

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

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

然后我更改了我的主脚本标签以将其作为模块导入并且它可以正常工作，但我仍然收到错误。我不知道它是如何工作并抛出错误的，但我忘记删除原始脚本标签。

ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import

ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import

html

javascript

module

ecmascript-6

es6-modules