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>
错误:
似乎b.js
未加载。
要使用ES6模块,您必须使用加载脚本type="module"
-这样可确保不了解ES6模块的浏览器不会阻塞该脚本
接下来,要导入,您必须指定导入文件的路径和完整文件名
查看代码中的注释
const x = 1;
export {x};
// specify the path and full filename below
import {x} from './b.js'; // <<-- NO ERROR NOW
console.log(x);
<!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] 删除。
我来说两句