Ale*_*aro 7 html javascript es6-modules
我正在尝试完成一个非常简单的事情：我在javascript模块文件上有一些代码，然后将其导入到另一个javascript文件中（不导出任何内容），我想从该文件中调用该文件中的某些已定义函数直接HTML。
让我们看一下我所发生的事情的一些有代表性的最小示例（实际上测试了代码，并给出了我在真实代码中遇到的完全相同的问题，实际上并没有比这个复杂得多）：
module.js：
const mod = () => 'Hello there!';
export { mod };
main.js：
import { mod } from './module.js';
function hello()
{
console.log(mod());
}
main.html：
<!DOCTYPE html>
<html>
<head>
<script type="module" src="module.js"></script>
<script type="module" src="main.js"></script>
</head>
<body>
<button name="next-button" onclick="hello()">Obi-Wan abandons the high ground to salute you</button>
</body>
</html>
没有import（并且将所有函数定义放在单个.js文件中），我可以直接从HTML调用函数。但是，一旦介绍了模块，我将不再能够：它只是说未定义“ hello（）”函数。
我是ES6模块（实际上是前端javascript）的新手，所以我完全知道我刚才所说的只是缺乏知识（或了解），但是我希望对我在做什么做错任何评论，并且如何解决它，这样我可以将我的代码保存在不同的文件中并能够使用它。谢谢大家！
每个模块都有自己的范围。他们没有像“普通”脚本那样共享全局范围。这意味着hello只能在main.js模块/文件本身内部访问。
如果您明确想要创建一个全局变量，则可以通过在全局对象上创建一个属性来实现window：
function hello()
{
console.log(mod());
}
window.hello = hello;
话虽如此，避免全局变量是一种好习惯。相反，您可以在创建按钮之后重组HTML以加载模块，并通过JavaScript绑定事件处理程序：
<!DOCTYPE html>
<html>
<body>
<button name="next-button">Obi-Wan abandons the high ground to salute you</button>
<script type="module" src="module.js"></script>
<script type="module" src="main.js"></script>
</body>
</html>
和
import { mod } from './module.js';
function hello()
{
console.log(mod());
}
document.querySelector('button').addEventListener('click', hello);