浏览器中的 ES6模块: 未捕获的 SyntaxError: 意外的令牌导入

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

为什么？

115675 次浏览
小开

Unfortunately, modules aren't supported by many browsers right now.

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.

Found on MDN

小开

You can try ES6 Modules in Google Chrome Beta (61) / Chrome Canary.

Reference Implementation of ToDo MVC by Paul Irish - https://paulirish.github.io/es-modules-todomvc/

I've basic demo - 

//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>

Hope it helps!

小开

it worked for me adding type="module" to the script importing my 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>

See demo: https://codepen.io/abernier/pen/wExQaa

小开
最佳答案

Many modern browsers now support ES6 modules. As long as you import your scripts (including the entrypoint to your application) using <script type="module" src="..."> it will work.

Take a look at caniuse.com for more details: https://caniuse.com/#feat=es6-module

小开

It could be that you changed an existing script to a module and forgot to remove the original script tag. This is what happened to me and how I got directed to this page. I had originally had this:

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

Then I changed my main script tag to import it as a module and it was working, but I still received the error. I couldn't figure out how it could be working and throwing an error, but I had forgotten to remove the original script tag.


提交答案