[Firebase][TypeScript] プロジェクトにimportする際に警告文が出てくることを解決したメモ

結論

• 機能別のソースを読み込むこと。

現象

• 以下のメッセージがコンソールに警告として表示された。

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 CDN builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

対処

src/index.pug

//- 変数一覧
- var title="Garden - 箱庭の島の子供たち"
- var description="箱庭の島に実験体として集められた、異形の子供たちの記録"
- var keywords="TRPG,異能,実験体,子供,廃墟"

doctype html
html
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    meta(name='description', content=description)
    meta(name='keywords', content=keywords)
    meta(name='robots', content=robots)
    meta(name='og:sitename', content=title) 
    meta(name='og:locale', content="ja_JP") 
    meta(name='og:title', content=title) 
    meta(name='og:description', content=description)
    title=title
    link(href='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css', rel='stylesheet')
    link(href='https://fonts.googleapis.com/icon?family=Material+Icons', rel='stylesheet')
    link(href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" rel="stylesheet")
    script(src="https://www.gstatic.com/firebasejs/5.9.0/firebase-app.js")
    script(src="https://www.gstatic.com/firebasejs/5.9.0/firebase-firestore.js")
-    script(src="https://www.gstatic.com/firebasejs/5.9.0/firebase.js")
+    script(src="https://www.gstatic.com/firebasejs/5.9.0/firebase-auth.js")
    script(src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js")
    script(defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js")
    script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js")

原因が、開発用のhttps://www.gstatic.com/firebasejs/5.9.0/firebase.js を直接読み込んでいるものだったため、それを個別に読み込んでやればOK.
Firebase を JavaScript プロジェクトに追加する だとちゃんと個別に読み込んであげてますね。

変えなくてもOKだったところ。

参考にした [Firebase][JavaScript] プロジェクトにimportする際に警告文が出てくる と異なり、
外部から読み込んでいるため、以下は変更しなくてもよかった。

src/assets/js/FireBaseBackEnd.ts

import * as firebase from 'firebase';
import * as firebaseui from 'firebaseui';

src/assets/js/type.d.ts

// コンパイルを通すため、外部から読み込むcssの宣言を行う。
declare module '*.scss';

// コンパイルを通すため、外部から読み込むjsライブラリの宣言を行う。
declare module 'firebase';
declare module 'firebaseui';
declare module 'M'; // materialize

docker/config/webpack.config.js

  },
  // cdnから読み込むものはここに
  externals: {
    jquery: 'jQuery'
    , 'chart.js': 'Chart'
    , firebase: 'firebase'
    , firebaseui: 'firebaseui'
    , M: 'M' // materialize
  },
};

警告解決時のソース

参考

[Firebase][JavaScript] プロジェクトにimportする際に警告文が出てくる