html中 引入js模块后提示找不到export的对象？

作者站长头像
站长
· 阅读数 4
//a.js
let Bank={
    name:"ll"
    
}
export default Bank;
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>abc</div>
    
    <script type="module" src="a.js">
        //忽略以下代码
        console.log(Bank)
        alert("abc")
    </script>
    <script>
        //正常执行
        alert("cd")
        //报错，提示找不到Bank
        console.log(Bank)
    </script>
</body>
</html>

代码比较简单。index.html 中 有两个script，第一个script是 模块化引入a.js第二个script是输出Bank变量。

问题：（1）第一段script ，script标签中的代码不会执行难，也就是不会alert abc .为什么？

（2）第二段script ，console.log(Bank)提示找不到bank, Bank不是引入了么？

回复
1个回答
avatar
test
2024-06-28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>abc</div>
    
    <script type="module" src="a.js"></script>
    <script type="module">
        // 导入Bank对象
        import Bank from './a.js';
        console.log(Bank);
        alert("abc");
    </script>
    <script>
        // 正常执行
        alert("cd");
        // 这里会报错，因为Bank在这个作用域里是不可见的
        // console.log(Bank);
    </script>
</body>
</html>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容