如何在HTML的script标签中导入外部JS文件的函数？

我尝试在index.html的script标签中导入独立JS文件（myFunc.js）中的sum函数，用于按钮onclick事件，避免当前脚本过于臃肿。测试代码如下：

index.html代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="show()">Click Me</button>
    <p id="result"></p>
</body>
<script>
    import { sum }  from './myFunc.js'
    
    const show = () => {
        document.getElementById("result").innerText = sum(2, 4);
    }
</script>
</html>

myFunc.js代码 #

export function sum(a, b) {
    return a + b
} 

目前出现错误：SyntaxError: Unexpected token '{'. import call expects one or two arguments.，且点击按钮时无法找到show()函数，因代码未通过import行。我是否遗漏了什么配置？

你遇到的问题源于两个核心原因：浏览器默认不识别普通script标签内的ES模块语法，以及ES模块的作用域限制。以下是具体修复步骤：

1. 为script标签添加type="module"属性
   浏览器只有在script标签声明type="module"时，才会将其当作ES模块解析，支持import/export语法。修改后的script标签如下：

<script type="module">
    import { sum }  from './myFunc.js'
    
    const show = () => {
        document.getElementById("result").innerText = sum(2, 4);
    }
</script>

2. 解决模块作用域导致show()无法全局访问的问题
   ES模块内的变量默认处于模块私有作用域，不会挂载到window对象上，因此按钮的onclick="show()"无法找到该函数。有两种常用解决方式：

• 方式一：将show函数挂载到全局window对象
  修改模块内的代码：

import { sum }  from './myFunc.js'

window.show = () => {
    document.getElementById("result").innerText = sum(2, 4);
}

• 方式二：使用事件监听替代内联onclick
  移除按钮的onclick属性，在模块内通过addEventListener绑定事件：

<!-- 修改按钮 -->
<button id="calcBtn">Click Me</button>

<!-- 模块脚本内 -->
<script type="module">
    import { sum }  from './myFunc.js'
    
    const show = () => {
        document.getElementById("result").innerText = sum(2, 4);
    }
    
    document.getElementById('calcBtn').addEventListener('click', show);
</script>

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