我想从html头文件中的所有类切换到模块方式。
我想在按钮和其他元素上使用一些方法和功能。
在我的 index.html 中的 head 部分：
<script src="js/main.js" type="module" defer></script>
main.js 内部：
import {writeAlert} from './test.js';
test.js 内部：
export function writeAlert () {
alert('I am an alert');
}
index.html的body元素内部
<button onlick="writeAlert()">Alert</button>
我收到未定义函数（或在其他情况下为类）的错误消息。那么实现全局使用导入函数的方法是什么呢？客户真的可以用这种方法看到我的整个源代码吗？
【问题讨论】：
标签： javascript import export
在模块中导入的标识符在外部是不可见的。
两种解决方案，按个人喜好排列：
<button id="alertButton">Alert</button>
main.js，或另一个导入writeAlert的模块：document.addEventListener("DOMContentLoaded", () => {
document.getElementById("alertButton").onclick = writeAlert;
});
writeAlert 到模块之一中的window：
import { writeAlert } from "./test.js";
window.writeAlert = writeAlert;
writeAlert 可以在您的代码、HTML 或 JS 中的任何位置访问，而无需任何导入。但这首先违背了使用导入的目的，而且也不那么优雅。【讨论】：
这是一个不完整的答案。但是，同样的想法可以进一步扩展。
在 main.js 中：
import {writeAlert} from './test.js';
window.writeAlert = writeAlert;
之后，可以从 HTML 文件访问“writeAlert”。
【讨论】：