Summarising The Problem: Is there any way of distributing functions which use a common external module into different files such that I don't need to download the same external modules again in each file. (In Vanilla JS)
Detailing: Hi There! So I have Been Using Firebase 9.6.0 For My Project(single js file) where I used to import it (Vanilla JS). But now the project has become lot bigger and using a single JS file is not favorable anymore. I read about importing and exporting functions. So I tried something like the following (main.js is imported as a module in HTML file):
file:main.js
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-analytics.js";
import { getFirestore, collection, addDoc,arrayRemove, setDoc, updateDoc, getDocs, doc, serverTimestamp, getDoc, } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore.js";
import { getData } from "module1.js"
file: module1.js
export function getData(){
try {
let docSnap = await getDoc(doc(db, "fruit","apple" ))
if (docSnap.exists()) {
var docJSON = docSnap.data();
....
}
it doesnt work anymore. Is it because i didnt import firebase modules in the other module? But if thats the case splitting them would just mean i need to download the same js modules again an again. So is there any way of fixing this?
You can download the remote files and package them along with your project.
So always you need to access the lib modules, you will find them locally.