VueJS 和 Firebase - 以正确的方式导入 firebase 包

Question

我很难正确导入 firebase SDK。我使用 Vue3 并通过 yarn add firebase 安装了 firebase

这是我的 firebase.js 文件：

import firebase from 'firebase/app';

但是，这会导致以下错误：1:1 error 'firebase/app' should be listed in the project's dependencies. Run 'npm i -S firebase/app' to add it import/no-extraneous-dependencies

import firebase from 'firebase';

这可行，但我收到以下警告：

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';

所以，第一种方法似乎是推荐的，但它不适合我。我做错了什么？

Answer 1

更新：这似乎已在 v2.23.4 (eslint-plugin-import) 中得到修复。

原答案：你没有做错任何事。这是一个错误，可能与 firebase 中的包定义有关，但这里在 eslint 规则的 repo 中进行了讨论：https://github.com/benmosher/eslint-plugin-import/issues/2065

您可以使用注释来阻止错误发生，如下所示：

// eslint-disable-next-line import/no-extraneous-dependencies
import firebase from 'firebase/app';

否则您将不得不等待问题得到解决。降级到 eslint-plugin-import 的 v2.22.1 也可能有效。

Answer 2

您需要为 firebase 创建一个配置文件并在此处导入 firebase。然后你 注册您需要的模块并将其导出，以便其他文件也可以使用它。

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
import "firebase/storage";

const firebaseConfig = {
    // you can get this from your firebase console.
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
};

// init firebase
firebase.initializeApp(firebaseConfig);

// init services
const projectFirestore = firebase.firestore();
const projectAuth = firebase.auth();
const projectStorage = firebase.storage();

export { projectFirestore, projectAuth, projectStorage };

在您想要使用 Firebase 的其他文件上，您可以执行类似的操作来导入它。

import { projectAuth } from '../firebase/config'

const user = ref(projectAuth.currentUser)