使用动态导入重写 Firebase 服务

Question

请帮我重写代码以使用动态导入功能。 不幸的是，我不知道如何在模块中使用动态导入。

import firebase from 'firebase/app';
import 'firebase/firestore';

const config = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
};

const initApp = firebase.initializeApp(config).firestore();
initApp.settings({
  timestampsInSnapshots: true,
});
const app = firebase.app().firestore();

export default !firebase.apps.length ? initApp : app;

我尝试了什么

import('firebase/app')
  .then((firebase) => {
    firebase.initializeApp(config).firestore();
  });

Answer 1

那是因为您想要的 firebase 变量实际上位于默认属性中。你可以这样做：

import('firebase/app')
    .then(firebase => {
      firebase.default.initializeApp(config).firestore();
    });

一个完整的异步函数建议如下：

// firebase-service.js

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MSG_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID
};

let db;

async function getFirestore () {
  if (!db) {
    const { default: firebase } = await import('firebase/app');
    await import('firebase/firestore');

    const app = firebase.initializeApp(firebaseConfig);
    db = app.firestore();
  }

  return db;
}

export { getFirestore };