单HTML文件调用模块内函数报错：ReferenceError: dataSubmit未找到

问题根源是module类型的脚本拥有独立作用域，内部定义的函数默认不会暴露到全局作用域，因此按钮的内联onclick（运行在全局作用域）无法找到module里的dataSubmit函数。以下是几种适配单文件要求的解决方案：

方案1：将Module内的函数挂载到全局window对象 #

在module脚本里把需要外部调用的函数赋值给window对象，让全局作用域能访问到：

<!-- 普通脚本：处理非Firebase相关的formSubmit逻辑 -->
<script>
function formSubmit() {
  // 示例：表单验证、数据格式化等逻辑
  console.log('表单基础验证完成');
}
</script>

<!-- Module脚本：处理Firebase相关逻辑 -->
<script type="module">
  // 导入Firebase API
  import { initializeApp, getFirestore } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
  import { doc, setDoc } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js";

  // 你的Firebase配置信息
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };

  // 初始化Firebase
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);

  // Firebase数据提交函数
  async function dataSubmit() {
    try {
      await setDoc(doc(db, "formData", "entry"), {
        // 待提交的数据
      });
      console.log('数据已提交到Firebase');
    } catch (error) {
      console.error('提交失败:', error);
    }
  }

  // 将函数暴露到全局window对象
  window.dataSubmit = dataSubmit;
</script>

<!-- 表单按钮：通过内联onclick调用两个函数 -->
<button onclick="formSubmit(); dataSubmit();">提交表单</button>

方案2：使用事件监听替代内联onclick（推荐） #

避免依赖全局作用域，直接在脚本中给按钮绑定点击事件，这样可以直接在module脚本里调用两个函数：

<!-- 表单按钮：无需内联onclick -->
<button id="submitBtn">提交表单</button>

<!-- 普通脚本：处理基础表单逻辑 -->
<script>
function formSubmit() {
  console.log('表单基础验证完成');
}
</script>

<!-- Module脚本：处理Firebase逻辑并绑定事件 -->
<script type="module">
  import { initializeApp, getFirestore } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
  // 其他Firebase导入和初始化代码...

  async function dataSubmit() {
    // Firebase数据提交逻辑
  }

  // 获取按钮元素，绑定点击事件
  const submitBtn = document.getElementById('submitBtn');
  submitBtn.addEventListener('click', async () => {
    formSubmit(); // 调用普通脚本中的函数
    await dataSubmit(); // 异步函数需加await确保执行顺序
  });
</script>

方案3：将所有逻辑整合到Module脚本中 #

如果formSubmit没有依赖非module环境的代码，直接把它放到module脚本里，统一管理：

<button id="submitBtn">提交表单</button>

<script type="module">
  import { initializeApp, getFirestore } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
  // Firebase初始化代码...

  // 表单基础处理函数
  function formSubmit() {
    console.log('表单验证完成');
  }

  // Firebase数据提交函数
  async function dataSubmit() {
    // Firebase相关逻辑
  }

  // 绑定点击事件
  const submitBtn = document.getElementById('submitBtn');
  submitBtn.addEventListener('click', async () => {
    formSubmit();
    await dataSubmit();
  });
</script>

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