ES6规范中 html调用模块内函数无法调用

项目场景：

项目场景：弹出html代码的模态框点击确定后，需要调用模块内的重新加载函数

---

问题描述

原本需要调用模块内的代码，通过模块正常导出
问题代码：

主代码html

	<script src="static/jquery-2.1.1.min.js"></script>
    <script src="static/layer/layer.js"></script>
    <script type="module" src="./main.js"></script>
    <script>
    function stageSelect(){
            console.log("选择关卡");
            let input = "<input id='stageNum' placeholder='输入数字'><//input>"
            layer.alert(input, {icon: 3, title: "请选择关卡"}, function (index){
                console.log("回调");
                stageChange($("#stageNum").val());
                layer.close(index);
            });
        }
    </script>

模块代码

	export function stageChange(stageNum){
		console.log(stageNum);
	}

最终回调失败

---

原因分析：

模块代码只会在加载的时候调用一次，export的方法也不是全局方法，导致html页面获取不到，而且html页面也没有import导入功能

---

解决方案：

在html代码中设置一个button
并在模块中绑定它的监听器

	<button hidden id="stageChange"></button>
	<script src="static/jquery-2.1.1.min.js"></script>
    <script src="static/layer/layer.js"></script>
    <script type="module" src="./main.js"></script>
    <script>
    function stageSelect(){
            console.log("选择关卡");
            let input = "<input id='stageNum' placeholder='输入数字'><//input>"
            layer.alert(input, {icon: 3, title: "请选择关卡"}, function (index){
                console.log("回调");
                $("#stageChange").click();
                layer.close(index);
            });
        }
    </script>

main.js

document.querySelector("#stageChange").addEventListener("click", (event) => {

    level = document.querySelector("#stageNum").value;
    console.log(level);
}