ES6 模块化时出现错误

最新推荐文章于 2024-08-27 15:50:27 发布

原创最新推荐文章于 2024-08-27 15:50:27 发布 · 695 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何在HTML中使用ES6模块进行导入和导出操作，包括正确设置script标签的type属性，以及在本地环境中通过http-server解决跨域问题的方法。

1. script 中记得添加 type="module" 记得将编辑器的js版本设置为ES6

a.js
import {sex,echo} from "./b.js"
console.log(sex);
echo("adf")

b.js
var sex="boy";
var echo=function(value){
    console.log(value)
}
export {sex,echo}

a.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="module"  src="./a.js"></script>
</head>
<body>
</body>
</html>

2.将上面的代码写好会报跨域错误

需要开启本地服务

a、终端下载： npm install http-server -g

b、开启 http-server服务：

     进入目标文件夹，然后在终端输入：$ http-server -c-1  

     要注意-c-1不能省去，否则更新了代码后，页面不会同步更新

c、关闭 http-server服务：按快捷键CTRL-C