為什么節點模塊在 firebase 模擬器上工作但在部署后不工作？

Question

我在我使用 npm 安裝的項目中使用 intl-tel-input。當我使用 Firebase 模擬器進行測試時，一切似乎都工作正常，但它在部署后停止工作。

檢查 Chrome 開發工具中的“源”選項卡后，我發現該模塊未正確包含。 （請檢查圖像）但是，我完全無法弄清楚為什么。 請幫忙！

電話輸入字段工作正常的模擬器屏幕截圖。

部署后截取的屏幕截圖，電話輸入字段已損壞。

源文件 - intlTelInput.js 位於 /node_modules/intl-tel-input/build/css/intlTelInput.js

源文件 - intlTelInput.css 位於 /node_modules/intl-tel-input/build/js/intlTelInput.css

Answer 1

默認情況下 Firebase 在部署時忽略node_modules目錄。

您可以使用幾個選項來解決此問題。

1. 使用 Rollup 或 Webpack 等構建工具生成包含節點依賴項的包。
2. 將所需的node_modules文件復制到不同的目錄，如assets ，並從那里加載它們。
3. 更新firebase.json以在部署時不忽略node_modules 。 請注意，如果您有任意數量的節點包，這可能會大大增加已部署應用程序的大小。