在Firebase CDN模块脚本中引入外部JS文件的方案咨询

我想在导入Firebase模块的脚本中使用外部JS文件，尝试了如下写法但无效：

<script type="module">
  // Import the functions you need from the SDKs you need    
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js";    
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-analytics.js";

  // TODO: Add SDKs for Firebase products that you want to use    
  // https://firebase.google.com/docs/web/setup#available-libraries    

  // Your web app's Firebase configuration    
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional    
  const firebaseConfig = {    
    apiKey: "AIzaSyA4G1l7vDgwzXoe0RGGX327EuG_c5nsm44",    
    authDomain: "pga222.firebaseapp.com",    
    databaseURL: "https://pga222-default-rtdb.europe-west1.firebasedatabase.app",    
    projectId: "pga222",    
    storageBucket: "pga222.appspot.com",    
    messagingSenderId: "233815977986",    
    appId: "1:233815977986:web:77093639624930a3ab371b",    
    measurementId: "G-QC3N2GJRC6"    
  };    

  // Initialize Firebase    
  const app = initializeApp(firebaseConfig);    
  const analytics = getAnalytics(app);    

<script type="text/javascript" src="path-to-javascript-file.js"></script>
</script>

推测无效原因是不能在script标签内部嵌套另一个script标签。现在所有代码都堆在Firebase模块脚本里，维护起来很麻烦，想拆分到多个外部文件，请问有没有不用Webpack这类工具的解决办法？或者Webpack就是用来解决这类问题的？

无需构建工具的方法 #

完全不需要依赖Webpack，利用ES模块的原生导入功能就能实现代码拆分：

1. 抽离Firebase初始化代码为独立模块
   创建firebase-init.js文件，专门处理Firebase的初始化逻辑并导出实例：

// firebase-init.js
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js";    
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-analytics.js";

const firebaseConfig = {    
  apiKey: "AIzaSyA4G1l7vDgwzXoe0RGGX327EuG_c5nsm44",    
  authDomain: "pga222.firebaseapp.com",    
  databaseURL: "https://pga222-default-rtdb.europe-west1.firebasedatabase.app",    
  projectId: "pga222",    
  storageBucket: "pga222.appspot.com",    
  messagingSenderId: "233815977986",    
  appId: "1:233815977986:web:77093639624930a3ab371b",    
  measurementId: "G-QC3N2GJRC6"    
};    

const app = initializeApp(firebaseConfig);    
const analytics = getAnalytics(app);

// 导出初始化后的实例，供其他业务模块调用
export { app, analytics };

2. 在业务脚本中导入Firebase实例
   将你的业务代码文件path-to-javascript-file.js改为ES模块，直接导入初始化好的Firebase实例：

// path-to-javascript-file.js
import { app, analytics } from './firebase-init.js';

// 在这里编写业务逻辑，直接使用app和analytics即可
console.log('Firebase实例已加载:', app);

3. 在HTML中引入业务模块
   把原来的嵌套脚本替换为单独的模块标签，浏览器会自动处理模块间的依赖加载：

<script type="module" src="./path-to-javascript-file.js"></script>

Webpack的作用 #

Webpack这类工具确实可以解决代码拆分和模块管理问题，但它的核心价值在于打包体积优化、兼容旧浏览器、集成工具链（比如Babel转译、CSS预处理等）。如果只是简单拆分ES模块，原生模块功能已经足够，没必要引入Webpack增加项目复杂度。只有当项目规模扩大、需要更多优化或兼容需求时，才需要考虑使用构建工具。

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