如何将JavaScript函数导入HTML并在脚本中调用？

你的代码里存在两个问题，导致无法正常调用test函数：

1. 带src属性的模块脚本（type="module"）不能同时包含内部代码，浏览器会直接忽略你写的test()调用。
2. 没有显式导入JavaScript文件中导出的test函数，直接调用会触发引用错误。

下面是两种可行的解决方法：

方法一：拆分脚本标签，显式导入函数 #

用两个独立的script标签，一个负责导入模块文件，另一个作为模块脚本导入函数并执行：

修改后的HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 导入外部模块文件 -->
  <script type="module" src="script.js"></script>
  <!-- 作为模块导入函数并调用 -->
  <script type="module">
    import { test } from './script.js';
    test();
  </script>
</head>
<body>
</body>
</html>

方法二：在JS模块内直接执行函数 #

如果希望导入模块时自动运行test函数，可以直接在JavaScript文件里调用它：

修改后的JavaScript文件：

export function test() {
    console.log('test');
}

// 模块加载时自动调用
test();

对应的HTML文件只需要导入模块即可：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="module" src="script.js"></script>
</head>
<body>
</body>
</html>

注意事项 #

• 使用ES模块时，导入路径必须是相对路径（比如./script.js），不能省略./，这是ES模块的规范要求。
• 模块脚本默认启用严格模式，不需要额外添加'use strict'声明。

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