give & not take

日々、幸せに生きるために。。。

vue.jsにfirebaseを組み込む際、warningが出た時の対処法

f:id:gaku3601:20180827083349p:plain

Gakuです。
ちまたではvue.jsとfirebaseで連携したアプリケーション開発が流行っていますね。
私も触ったことがなかったので、今朝から触り出したのですが、短時間のうちにチャットシステムが作成できて衝撃を受けております。
そのうえで、vue.jsにfirebaseを組み込んだ際にwarningが出力され、少しだけハマったのでその解消法を掲載しておきます。

import firebase from 'firebase'

これでvue.jsに組み込むと以下のwarningが出力されます。

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';
import 'firebase/<PACKAGE>';
...以下省略

warningとかerrorとかは動いていても潰していきたい性分なので、潰します。

解消法

すごく簡単です。

import firebase from 'firebase'

で記述していた部分を

import firebase from 'firebase/app'

に変更するだけでOKです。 また、firebase.auth()やfirebase.database()を使用する場合、

import firebase from 'firebase/app'
import 'firebase/auth' //ここ追記
import 'firebase/database' //ここ追記

のように追記してあげれば、warningが出力されないようになります。

さいごに

warningとかerrorは精神衛生上とか割れ窓理論的に良くないので、みつけたら速攻潰していきましょう(´・ω・`)b

参考文献

github.com