如何使用$.getScript()导入含Firebase模块的模块化report.js文件

核心问题在于$.getScript是为加载传统非模块化脚本设计的，无法正确处理包含import语法的ES模块脚本。以下是两种可行的适配方案：

方案一：使用ES动态import()（推荐） #

现代浏览器原生支持动态import()，可以直接加载ES模块并获取其导出内容，完美替代$.getScript用于模块加载场景。

步骤1：改造report.js为ES模块 #

将原有代码修改为带导出的模块格式，同时引入Firebase模块：

// /js/firebase/report.js（ES模块版本）
// 导入所需的Firebase模块（替换为你实际使用的版本号）
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js";

// 导出初始化函数
export function initializeReporting() {
  // 初始化Firebase配置
  const firebaseConfig = {
    // 你的Firebase配置信息
  };
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);
  
  // 原有报告逻辑代码...
}

步骤2：修改主脚本的加载逻辑 #

替换原有的loadScript('/js/firebase/report.js')为动态import()：

<script>
  async function loadScript(url) {
    return new Promise((resolve, reject) => {
      $.getScript(url, resolve);
    });
  }

  const pageType = $('.model-report-wrapper').data('page-type');
  let reportingScriptIsntLoaded = true;

  $('#model-report-button').popover();

  $('.model-report-wrapper').on('click', async function () {
    try {
      $('#model-report-button span').html('<i class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></i> Loading...');

      if(reportingScriptIsntLoaded){
        // 加载样式逻辑保持不变
        await new Promise((resolve, reject) => {
          const link = document.createElement('link');
          link.rel = 'stylesheet';
          link.href = '/css/firebase/report.css';
          link.type = 'text/css';
          link.onload = resolve;
          link.onerror = reject;
          document.head.appendChild(link);
        });

        // 非模块脚本（如recaptcha）继续用$.getScript加载
        await loadScript('https://www.google.com/recaptcha/api.js');
        
        // 用动态import加载ES模块版本的report.js
        const reportModule = await import('/js/firebase/report.js');
        // 调用模块导出的初始化函数
        reportModule.initializeReporting();

        reportingScriptIsntLoaded = false;
      }

      $('#model-report-button').popover('show');
      $('#model-report-button span').text('Report Content Issue');
    } catch (error) {
      console.error('Error loading scripts:', error);
    }
  });
</script>

方案二：手动创建type="module"脚本标签 #

如果需要兼容极少数不支持动态import()的旧浏览器，可以通过手动创建模块脚本标签的方式加载：

// 在if(reportingScriptIsntLoaded)代码块中替换对应部分：
await new Promise((resolve, reject) => {
  const script = document.createElement('script');
  script.type = 'module';
  script.src = '/js/firebase/report.js';
  script.onload = resolve;
  script.onerror = reject;
  document.head.appendChild(script);
});

此时report.js可以选择在模块内部直接执行初始化逻辑（无需导出），或者通过挂载全局变量的方式让主脚本调用。

注意事项 #

1. 确保服务器为ES模块脚本设置正确的Content-Type（通常为application/javascript，多数现代服务器会自动识别type="module"的脚本）
2. Firebase模块需使用支持ES模块的CDN链接，或通过打包工具（如Vite、Webpack）处理后引入
3. 非模块化脚本（如reCAPTCHA）仍可使用$.getScript正常加载

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