firebase - 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也可能工作。