ES6导入无效

阿尔菲的态度

b.js

const x = 1;
export {x};

a.js

import {x} from 'b'; // <<-- ERROR
console.log(x);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="a.js"></script>
</body>
</html>

错误:

未捕获到的SyntaxError:意外令牌{

我正在使用WebStorm,并在Win7中的Chrome中运行该项目。


更新:

我将index.html内容更改为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="a.js" type="module"></script>
</body>
</html>

错误:

未捕获的TypeError:无法解析模块说明符“ b”。相对引用必须以“ /”、“./”或“ ../”开头。在此处输入图片说明

似乎b.js未加载。

Jaromanda X

要使用ES6模块,您必须使用加载脚本type="module"-这样可确保不了解ES6模块的浏览器不会阻塞该脚本

接下来,要导入,您必须指定导入文件的路径和完整文件名

查看代码中的注释

b.js

const x = 1;
export {x};

a.js

// specify the path and full filename below
import {x} from './b.js'; // <<-- NO ERROR NOW
console.log(x);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- add type="module" -->
<script src="a.js" type="module"></script>
</body>
</html>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章