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

Question

我很难正确导入 firebase SDK。我使用 Vue3 并通过安装 firebaseyarn add 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 规则的存储库中对此进行了讨论：https ://github.com/benmosher/eslint-plugin-import/issues/2065

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

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

或者您必须等待问题得到解决。降级到 v2.22.1eslint-plugin-import也可能有效。