为何使用ES6模块import时出现ReferenceError？

当用type="module"引入JS文件时，代码会运行在模块作用域而非全局作用域。HTML里的onclick="show()"是在全局作用域查找show函数，自然找不到，所以抛出Uncaught ReferenceError。另外你在show函数里重复导入myString属于冗余操作，完全没必要。

方法1：把函数暴露到全局作用域 #

修改script.js，将show函数挂载到window对象上，让全局能访问到：

import { myString } from "./mod.js";

function show() {
  document.getElementById("output").innerHTML = myString;
}

// 将函数挂载到全局window对象
window.show = show;

方法2：用事件监听替代inline onclick（更推荐） #

这种写法不用污染全局作用域，是更规范的现代前端做法：

1. 修改index.html，移除按钮的onclick属性，给按钮加一个ID：

<!DOCTYPE html>
<html>
<head>
<title>Import Example</title>
</head>
<body>
<button id="showBtn">Show</button>
<p id="output"></p>
<script type="module" src="script.js"></script>
</body>
</html>

2. 修改script.js，通过ID获取按钮并添加点击事件监听：

import { myString } from "./mod.js";

const showBtn = document.getElementById('showBtn');
const outputEl = document.getElementById('output');

showBtn.addEventListener('click', () => {
  outputEl.innerHTML = myString;
});

• 模块中的导入语句只需要在顶部声明一次，函数内部重复导入会增加不必要的加载开销。
• 用事件监听替代inline事件绑定，能更好地分离HTML与JS代码，避免全局作用域污染，是前端开发的最佳实践。

内容的提问来源于stack exchange，提问作者Merkyyy