能否在HTML <script type=module>中导入内部导出？如何获取导出值？

不能直接通过ES模块的import语法实现，因为内联模块没有可被import识别的独立URL，你尝试的./current.html#test这类写法不符合模块解析规则，无法生效。

替代方案 #

1. 主动挂载到全局作用域（简单场景） #

修改目标模块，将导出内容挂载到window对象：

<script id="test" type="module">
    const a = 42;
    export default a;
    // 挂载到全局
    window.moduleA = a;
</script>

在接收模块中，确保目标模块已执行后读取全局变量：

<script type="module">
    window.addEventListener('DOMContentLoaded', () => {
        console.log(window.moduleA); // 输出42
    });
</script>

注意：这种方式会打破模块的作用域隔离性，仅适合简单场景。

2. 利用Blob URL动态导入（符合模块规范） #

无需修改原模块，提取其内容生成Blob URL后动态导入：

<script id="test" type="module">
    const a = 42;
    export default a;
</script>

<script type="module">
    // 获取目标脚本内容
    const scriptEl = document.getElementById('test');
    const moduleCode = scriptEl.textContent;
    
    // 创建Blob并生成可导入的URL
    const blob = new Blob([moduleCode], { type: 'application/javascript' });
    const moduleUrl = URL.createObjectURL(blob);
    
    // 动态导入模块
    import(moduleUrl)
        .then(module => {
            console.log(module.default); // 输出42
            // 用完释放URL，避免内存泄漏
            URL.revokeObjectURL(moduleUrl);
        });
</script>

这种方式保留了模块的特性，适合分批传输HTML片段、制作包含可运行代码片段文档的场景。

3. 自定义事件传递数据（解耦通信） #

如果核心需求是模块间通信，可通过自定义事件实现：

<script id="test" type="module">
    const a = 42;
    export default a;
    // 发送自定义事件携带数据
    window.dispatchEvent(new CustomEvent('moduleData', { detail: a }));
</script>

<script type="module">
    // 监听事件接收数据
    window.addEventListener('moduleData', (e) => {
        console.log(e.detail); // 输出42
    });
</script>

该方式解耦性强，适合独立HTML片段之间的通信场景。

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