问候我现在正在学习javascript，我想知道如何在其中实现模块化。我在谷歌上搜索了一些，但没有完全理解这个方法。
所以我好心地请求帮助。如何做到这一点？
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Modularity</title>
</head>
<body>
<button id="buttonFoo" type="button" onclick="foo()">Foo</button>
<button id="buttonBar" type="button" onclick="bar()">Bar</button>
<script src="main.js"></script>
</body>
</html>
main.js
import { foo } from './foo.js'
import { bar } from './bar.js'
foo.js
export function foo()
{
alert("FOO!");
}
bar.js
export function bar()
{
alert("BAR!");
}
当我点击按钮时，我会在调试中得到这个错误。
Uncaught ReferenceError: foo is not defined
Uncaught ReferenceError: bar is not defined
提前感谢您抽出时间。
简而言之，你不能只是把使用模块的代码扔到浏览器中并期望它能工作，因为web是在模块存在之前构建的，所以它的"默认模块系统"；就是一无所有。
更长的答案是，您需要遵循某些步骤，详细信息如下：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
最重要的是，您需要在script标签上使用"module"的type：
<script type="module">/* ... your code */ </script>
或：
<script type="module" src="index.js"></script>